<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Portals</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<style data-fill-with="stylesheet">/******************************************************************************
 *                   Style sheet for the W3C specifications                   *
 *
 * Special classes handled by this style sheet include:
 *
 * Indices
 *   - .toc for the Table of Contents (<ol class="toc">)
 *     + <span class="secno"> for the section numbers
 *   - #toc for the Table of Contents (<nav id="toc">)
 *   - ul.index for Indices (<a href="#ref">term</a><span>, in §N.M</span>)
 *   - table.index for Index Tables (e.g. for properties or elements)
 *
 * Structural Markup
 *   - table.data for general data tables
 *     -> use 'scope' attribute, <colgroup>, <thead>, and <tbody> for best results !
 *     -> use <table class='complex data'> for extra-complex tables
 *     -> use <td class='long'> for paragraph-length cell content
 *     -> use <td class='pre'> when manual line breaks/indentation would help readability
 *   - dl.switch for switch statements
 *   - ol.algorithm for algorithms (helps to visualize nesting)
 *   - .figure and .caption (HTML4) and figure and figcaption (HTML5)
 *     -> .sidefigure for right-floated figures
 *   - ins/del
 *
 * Code
 *   - pre and code
 *
 * Special Sections
 *   - .note       for informative notes             (div, p, span, aside, details)
 *   - .example    for informative examples          (div, p, pre, span)
 *   - .issue      for issues                        (div, p, span)
 *   - .assertion  for assertions                    (div, p, span)
 *   - .advisement for loud normative statements     (div, p, strong)
 *   - .annoying-warning for spec obsoletion notices (div, aside, details)
 *
 * Definition Boxes
 *   - pre.def   for WebIDL definitions
 *   - table.def for tables that define other entities (e.g. CSS properties)
 *   - dl.def    for definition lists that define other entitles (e.g. HTML elements)
 *
 * Numbering
 *   - .secno for section numbers in .toc and headings (<span class='secno'>3.2</span>)
 *   - .marker for source-inserted example/figure/issue numbers (<span class='marker'>Issue 4</span>)
 *   - ::before styled for CSS-generated issue/example/figure numbers:
 *     -> Documents wishing to use this only need to add
 *        figcaption::before,
 *        .caption::before { content: "Figure "  counter(figure) " ";  }
 *        .example::before { content: "Example " counter(example) " "; }
 *        .issue::before   { content: "Issue "   counter(issue) " ";   }
 *
 * Header Stuff (ignore, just don't conflict with these classes)
 *   - .head for the header
 *   - .copyright for the copyright
 *
 * Miscellaneous
 *   - .overlarge for things that should be as wide as possible, even if
 *     that overflows the body text area. This can be used on an item or
 *     on its container, depending on the effect desired.
 *     Note that this styling basically doesn't help at all when printing,
 *     since A4 paper isn't much wider than the max-width here.
 *     It's better to design things to fit into a narrower measure if possible.
 *   - js-added ToC jump links (see fixup.js)
 *
 ******************************************************************************/

/******************************************************************************/
/*                                   Body                                     */
/******************************************************************************/

	body {
		counter-reset: example figure issue;

		/* Layout */
		max-width: 50em;               /* limit line length to 50em for readability   */
		margin: 0 auto;                /* center text within page                     */
		padding: 1.6em 1.5em 2em 50px; /* assume 16px font size for downlevel clients */
		padding: 1.6em 1.5em 2em calc(26px + 1.5em); /* leave space for status flag     */

		/* Typography */
		line-height: 1.5;
		font-family: sans-serif;
		widows: 2;
		orphans: 2;
		word-wrap: break-word;
		overflow-wrap: break-word;
		hyphens: auto;

		/* Colors */
		color: black;
		background: white top left fixed no-repeat;
		background-size: 25px auto;
	}


/******************************************************************************/
/*                         Front Matter & Navigation                          */
/******************************************************************************/

/** Header ********************************************************************/

	div.head { margin-bottom: 1em }
	div.head hr { border-style: solid; }

	div.head h1 {
		font-weight: bold;
		margin: 0 0 .1em;
		font-size: 220%;
	}

	div.head h2 { margin-bottom: 1.5em;}

/** W3C Logo ******************************************************************/

	.head .logo {
		float: right;
		margin: 0.4rem 0 0.2rem .4rem;
	}

	.head img[src*="logos/W3C"] {
		display: block;
		border: solid #1a5e9a;
		border-width: .65rem .7rem .6rem;
		border-radius: .4rem;
		background: #1a5e9a;
		color: white;
		font-weight: bold;
	}

	.head a:hover > img[src*="logos/W3C"],
	.head a:focus > img[src*="logos/W3C"] {
		opacity: .8;
	}

	.head a:active > img[src*="logos/W3C"] {
		background: #c00;
		border-color: #c00;
	}

	/* see also additional rules in Link Styling section */

/** Copyright *****************************************************************/

	p.copyright,
	p.copyright small { font-size: small }

/** Back to Top / ToC Toggle **************************************************/

	@media print {
		#toc-nav {
			display: none;
		}
	}
	@media not print {
		#toc-nav {
			position: fixed;
			z-index: 2;
			bottom: 0; left: 0;
			margin: 0;
			min-width: 1.33em;
			border-top-right-radius: 2rem;
			box-shadow: 0 0 2px;
			font-size: 1.5em;
			color: black;
		}
		#toc-nav > a {
			display: block;
			white-space: nowrap;

			height: 1.33em;
			padding: .1em 0.3em;
			margin: 0;

			background: white;
			box-shadow: 0 0 2px;
			border: none;
			border-top-right-radius: 1.33em;
			background: white;
		}
		#toc-nav > #toc-jump {
			padding-bottom: 2em;
			margin-bottom: -1.9em;
		}

		#toc-nav > a:hover,
		#toc-nav > a:focus {
			background: #f8f8f8;
		}
		#toc-nav > a:not(:hover):not(:focus) {
			color: #707070;
		}

		/* statusbar gets in the way on keyboard focus; remove once browsers fix */
		#toc-nav > a[href="#toc"]:not(:hover):focus:last-child {
			padding-bottom: 1.5rem;
		}

		#toc-nav:not(:hover) > a:not(:focus) > span + span {
			/* Ideally this uses :focus-within on #toc-nav */
			display: none;
		}
		#toc-nav > a > span + span {
			padding-right: 0.2em;
		}

		#toc-toggle-inline {
			vertical-align: 0.05em;
			font-size: 80%;
			color: gray;
			color: hsla(203,20%,40%,.7);
			border-style: none;
			background: transparent;
			position: relative;
		}
		#toc-toggle-inline:hover:not(:active),
		#toc-toggle-inline:focus:not(:active) {
			text-shadow: 1px 1px silver;
			top: -1px;
			left: -1px;
		}

		#toc-nav :active {
			color: #C00;
		}
	}

/** ToC Sidebar ***************************************************************/

	/* Floating sidebar */
	@media screen {
		body.toc-sidebar #toc {
			position: fixed;
			top: 0; bottom: 0;
			left: 0;
			width: 23.5em;
			max-width: 80%;
			max-width: calc(100% - 2em - 26px);
			overflow: auto;
			padding: 0 1em;
			padding-left: 42px;
			padding-left: calc(1em + 26px);
			background: inherit;
			background-color: #f7f8f9;
			z-index: 1;
			box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset;
		}
		body.toc-sidebar #toc h2 {
			margin-top: .8rem;
			font-variant: small-caps;
			font-variant: all-small-caps;
			text-transform: lowercase;
			font-weight: bold;
			color: gray;
			color: hsla(203,20%,40%,.7);
		}
		body.toc-sidebar #toc-jump:not(:focus) {
			width: 0;
			height: 0;
			padding: 0;
			position: absolute;
			overflow: hidden;
		}
	}
	/* Hide main scroller when only the ToC is visible anyway */
	@media screen and (max-width: 28em) {
		body.toc-sidebar {
			overflow: hidden;
		}
	}

	/* Sidebar with its own space */
	@media screen and (min-width: 78em) {
		body:not(.toc-inline) #toc {
			position: fixed;
			top: 0; bottom: 0;
			left: 0;
			width: 23.5em;
			overflow: auto;
			padding: 0 1em;
			padding-left: 42px;
			padding-left: calc(1em + 26px);
			background: inherit;
			background-color: #f7f8f9;
			z-index: 1;
			box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset;
		}
		body:not(.toc-inline) #toc h2 {
			margin-top: .8rem;
			font-variant: small-caps;
			font-variant: all-small-caps;
			text-transform: lowercase;
			font-weight: bold;
			color: gray;
			color: hsla(203,20%,40%,.7);
		}

		body:not(.toc-inline) {
			padding-left: 29em;
		}
		/* See also Overflow section at the bottom */

		body:not(.toc-inline) #toc-jump:not(:focus) {
			width: 0;
			height: 0;
			padding: 0;
			position: absolute;
			overflow: hidden;
		}
	}
	@media screen and (min-width: 90em) {
		body:not(.toc-inline) {
			margin: 0 4em;
		}
	}

/******************************************************************************/
/*                                Sectioning                                  */
/******************************************************************************/

/** Headings ******************************************************************/

	h1, h2, h3, h4, h5, h6, dt {
		page-break-after: avoid;
		page-break-inside: avoid;
		font: 100% sans-serif;   /* Reset all font styling to clear out UA styles */
		font-family: inherit;    /* Inherit the font family. */
		line-height: 1.2;        /* Keep wrapped headings compact */
		hyphens: manual;         /* Hyphenated headings look weird */
	}

	h2, h3, h4, h5, h6 {
		margin-top: 3rem;
	}

	h1, h2, h3 {
		color: #005A9C;
		background: transparent;
	}

	h1 { font-size: 170%; }
	h2 { font-size: 140%; }
	h3 { font-size: 120%; }
	h4 { font-weight: bold; }
	h5 { font-style: italic; }
	h6 { font-variant: small-caps; }
	dt { font-weight: bold; }

/** Subheadings ***************************************************************/

	h1 + h2,
	#subtitle {
		/* #subtitle is a subtitle in an H2 under the H1 */
		margin-top: 0;
	}
	h2 + h3,
	h3 + h4,
	h4 + h5,
	h5 + h6 {
		margin-top: 1.2em; /* = 1 x line-height */
	}

/** Section divider ***********************************************************/

	:not(.head) > hr {
		font-size: 1.5em;
		text-align: center;
		margin: 1em auto;
		height: auto;
		border: transparent solid 0;
		background: transparent;
	}
	:not(.head) > hr::before {
		content: "\2727\2003\2003\2727\2003\2003\2727";
	}

/******************************************************************************/
/*                            Paragraphs and Lists                            */
/******************************************************************************/

	p {
		margin: 1em 0;
	}

	dd > p:first-child,
	li > p:first-child {
		margin-top: 0;
	}

	ul, ol {
		margin-left: 0;
		padding-left: 2em;
	}

	li {
		margin: 0.25em 0 0.5em;
		padding: 0;
	}

	dl dd {
		margin: 0 0 .5em 2em;
	}

	.head dd + dd { /* compact for header */
		margin-top: -.5em;
	}

	/* Style for algorithms */
	ol.algorithm ol:not(.algorithm),
	.algorithm > ol ol:not(.algorithm) {
	 border-left: 0.5em solid #DEF;
	}

	/* Put nice boxes around each algorithm. */
	[data-algorithm]:not(.heading) {
	  padding: .5em;
	  border: thin solid #ddd; border-radius: .5em;
	  margin: .5em calc(-0.5em - 1px);
	}
	[data-algorithm]:not(.heading) > :first-child {
	  margin-top: 0;
	}
	[data-algorithm]:not(.heading) > :last-child {
	  margin-bottom: 0;
	}

	/* Style for switch/case <dl>s */
	dl.switch > dd > ol.only,
	dl.switch > dd > .only > ol {
	 margin-left: 0;
	}
	dl.switch > dd > ol.algorithm,
	dl.switch > dd > .algorithm > ol {
	 margin-left: -2em;
	}
	dl.switch {
	 padding-left: 2em;
	}
	dl.switch > dt {
	 text-indent: -1.5em;
	 margin-top: 1em;
	}
	dl.switch > dt + dt {
	 margin-top: 0;
	}
	dl.switch > dt::before {
	 content: '\21AA';
	 padding: 0 0.5em 0 0;
	 display: inline-block;
	 width: 1em;
	 text-align: right;
	 line-height: 0.5em;
	}

/** Terminology Markup ********************************************************/


/******************************************************************************/
/*                                 Inline Markup                              */
/******************************************************************************/

/** Terminology Markup ********************************************************/
	dfn   { /* Defining instance */
		font-weight: bolder;
	}
	a > i { /* Instance of term */
		font-style: normal;
	}
	dt dfn code, code.idl {
		font-size: medium;
	}
	dfn var {
		font-style: normal;
	}

/** Change Marking ************************************************************/

	del { color: red;  text-decoration: line-through; }
	ins { color: #080; text-decoration: underline;    }

/** Miscellaneous improvements to inline formatting ***************************/

	sup {
		vertical-align: super;
		font-size: 80%
	}

/******************************************************************************/
/*                                    Code                                    */
/******************************************************************************/

/** General monospace/pre rules ***********************************************/

	pre, code, samp {
		font-family: Menlo, Consolas, "DejaVu Sans Mono", Monaco, monospace;
		font-size: .9em;
		page-break-inside: avoid;
		hyphens: none;
		text-transform: none;
	}
	pre code,
	code code {
		font-size: 100%;
	}

	pre {
		margin-top: 1em;
		margin-bottom: 1em;
		overflow: auto;
	}

/** Inline Code fragments *****************************************************/

  /* Do something nice. */

/******************************************************************************/
/*                                    Links                                   */
/******************************************************************************/

/** General Hyperlinks ********************************************************/

	/* We hyperlink a lot, so make it less intrusive */
	a[href] {
		color: #034575;
		text-decoration: none;
		border-bottom: 1px solid #707070;
		/* Need a bit of extending for it to look okay */
		padding: 0 1px 0;
		margin: 0 -1px 0;
	}
	a:visited {
		border-bottom-color: #BBB;
	}

	/* Use distinguishing colors when user is interacting with the link */
	a[href]:focus,
	a[href]:hover {
		background: #f8f8f8;
		background: rgba(75%, 75%, 75%, .25);
		border-bottom-width: 3px;
		margin-bottom: -2px;
	}
	a[href]:active {
		color: #C00;
		border-color: #C00;
	}

	/* Backout above styling for W3C logo */
	.head .logo,
	.head .logo a {
		border: none;
		text-decoration: none;
		background: transparent;
	}

/******************************************************************************/
/*                                    Images                                  */
/******************************************************************************/

	img {
		border-style: none;
	}

	/* For autogen numbers, add
	   .caption::before, figcaption::before { content: "Figure " counter(figure) ". "; }
	*/

	figure, .figure, .sidefigure {
		page-break-inside: avoid;
		text-align: center;
		margin: 2.5em 0;
	}
	.figure img,    .sidefigure img,    figure img,
	.figure object, .sidefigure object, figure object {
		max-width: 100%;
		margin: auto;
	}
	.figure pre, .sidefigure pre, figure pre {
		text-align: left;
		display: table;
		margin: 1em auto;
	}
	.figure table, figure table {
		margin: auto;
	}
	@media screen and (min-width: 20em) {
		.sidefigure {
			float: right;
			width: 50%;
			margin: 0 0 0.5em 0.5em
		}
	}
	.caption, figcaption, caption {
		font-style: italic;
		font-size: 90%;
	}
	.caption::before, figcaption::before, figcaption > .marker {
		font-weight: bold;
	}
	.caption, figcaption {
		counter-increment: figure;
	}

	/* DL list is indented 2em, but figure inside it is not */
	dd > .figure, dd > figure { margin-left: -2em }

/******************************************************************************/
/*                             Colored Boxes                                  */
/******************************************************************************/

	.issue, .note, .example, .assertion, .advisement, blockquote {
		padding: .5em;
		border: .5em;
		border-left-style: solid;
		page-break-inside: avoid;
	}
	span.issue, span.note {
		padding: .1em .5em .15em;
		border-right-style: solid;
	}

	.issue,
	.note,
	.example,
	.advisement,
	.assertion,
	blockquote {
		margin: 1em auto;
	}
	.note  > p:first-child,
	.issue > p:first-child,
	blockquote > :first-child {
		margin-top: 0;
	}
	blockquote > :last-child {
		margin-bottom: 0;
	}

/** Blockquotes ***************************************************************/

	blockquote {
		border-color: silver;
	}

/** Open issue ****************************************************************/

	.issue {
		border-color: #E05252;
		background: #FBE9E9;
		counter-increment: issue;
		overflow: auto;
	}
	.issue::before, .issue > .marker {
		text-transform: uppercase;
		color: #AE1E1E;
		padding-right: 1em;
		text-transform: uppercase;
	}
	/* Add .issue::before { content: "Issue " counter(issue) " "; } for autogen numbers,
	   or use class="marker" to mark up the issue number in source. */

/** Example *******************************************************************/

	.example {
		border-color: #E0CB52;
		background: #FCFAEE;
		counter-increment: example;
		overflow: auto;
		clear: both;
	}
	.example::before, .example > .marker {
		text-transform: uppercase;
		color: #827017;
		min-width: 7.5em;
		display: block;
	}
	/* Add .example::before { content: "Example " counter(example) " "; } for autogen numbers,
	   or use class="marker" to mark up the example number in source. */

/** Non-normative Note ********************************************************/

	.note {
		border-color: #52E052;
		background: #E9FBE9;
		overflow: auto;
	}

	.note::before, .note > .marker,
	details.note > summary::before,
	details.note > summary > .marker {
		text-transform: uppercase;
		display: block;
		color: hsl(120, 70%, 30%);
	}
	/* Add .note::before { content: "Note"; } for autogen label,
	   or use class="marker" to mark up the label in source. */

	details.note > summary {
		display: block;
		color: hsl(120, 70%, 30%);
	}
	details.note[open] > summary {
		border-bottom: 1px silver solid;
	}

/** Assertion Box *************************************************************/
	/*  for assertions in algorithms */

	.assertion {
		border-color: #AAA;
		background: #EEE;
	}

/** Advisement Box ************************************************************/
	/*  for attention-grabbing normative statements */

	.advisement {
		border-color: orange;
		border-style: none solid;
		background: #FFEECC;
	}
	strong.advisement {
		display: block;
		text-align: center;
	}
	.advisement > .marker {
		color: #B35F00;
	}

/** Spec Obsoletion Notice ****************************************************/
	/* obnoxious obsoletion notice for older/abandoned specs. */

	details {
		display: block;
	}
	summary {
		font-weight: bolder;
	}

	.annoying-warning:not(details),
	details.annoying-warning:not([open]) > summary,
	details.annoying-warning[open] {
		background: #fdd;
		color: red;
		font-weight: bold;
		padding: .75em 1em;
		border: thick red;
		border-style: solid;
		border-radius: 1em;
	}
	.annoying-warning :last-child {
		margin-bottom: 0;
	}

@media not print {
	details.annoying-warning[open] {
		position: fixed;
		left: 1em;
		right: 1em;
		bottom: 1em;
		z-index: 1000;
	}
}

	details.annoying-warning:not([open]) > summary {
		text-align: center;
	}

/** Entity Definition Boxes ***************************************************/

	.def {
		padding: .5em 1em;
		background: #DEF;
		margin: 1.2em 0;
		border-left: 0.5em solid #8CCBF2;
	}

/******************************************************************************/
/*                                    Tables                                  */
/******************************************************************************/

	th, td {
		text-align: left;
		text-align: start;
	}

/** Property/Descriptor Definition Tables *************************************/

	table.def {
		/* inherits .def box styling, see above */
		width: 100%;
		border-spacing: 0;
	}

	table.def td,
	table.def th {
		padding: 0.5em;
		vertical-align: baseline;
		border-bottom: 1px solid #bbd7e9;
	}

	table.def > tbody > tr:last-child th,
	table.def > tbody > tr:last-child td {
		border-bottom: 0;
	}

	table.def th {
		font-style: italic;
		font-weight: normal;
		padding-left: 1em;
		width: 3em;
	}

	/* For when values are extra-complex and need formatting for readability */
	table td.pre {
		white-space: pre-wrap;
	}

	/* A footnote at the bottom of a def table */
	table.def           td.footnote {
		padding-top: 0.6em;
	}
	table.def           td.footnote::before {
		content: " ";
		display: block;
		height: 0.6em;
		width: 4em;
		border-top: thin solid;
	}

/** Data tables (and properly marked-up index tables) *************************/
	/*
		 <table class="data"> highlights structural relationships in a table
		 when correct markup is used (e.g. thead/tbody, th vs. td, scope attribute)

		 Use class="complex data" for particularly complicated tables --
		 (This will draw more lines: busier, but clearer.)

		 Use class="long" on table cells with paragraph-like contents
		 (This will adjust text alignment accordingly.)
		 Alternately use class="longlastcol" on tables, to have the last column assume "long".
	*/

	table {
		word-wrap: normal;
		overflow-wrap: normal;
		hyphens: manual;
	}

	table.data,
	table.index {
		margin: 1em auto;
		border-collapse: collapse;
		border: hidden;
		width: 100%;
	}
	table.data caption,
	table.index caption {
		max-width: 50em;
		margin: 0 auto 1em;
	}

	table.data td,  table.data th,
	table.index td, table.index th {
		padding: 0.5em 1em;
		border-width: 1px;
		border-color: silver;
		border-top-style: solid;
	}

	table.data thead td:empty {
		padding: 0;
		border: 0;
	}

	table.data  thead,
	table.index thead,
	table.data  tbody,
	table.index tbody {
		border-bottom: 2px solid;
	}

	table.data colgroup,
	table.index colgroup {
		border-left: 2px solid;
	}

	table.data  tbody th:first-child,
	table.index tbody th:first-child  {
		border-right: 2px solid;
		border-top: 1px solid silver;
		padding-right: 1em;
	}

	table.data th[colspan],
	table.data td[colspan] {
		text-align: center;
	}

	table.complex.data th,
	table.complex.data td {
		border: 1px solid silver;
		text-align: center;
	}

	table.data.longlastcol td:last-child,
	table.data td.long {
	 vertical-align: baseline;
	 text-align: left;
	}

	table.data img {
		vertical-align: middle;
	}


/*
Alternate table alignment rules

	table.data,
	table.index {
		text-align: center;
	}

	table.data  thead th[scope="row"],
	table.index thead th[scope="row"] {
		text-align: right;
	}

	table.data  tbody th:first-child,
	table.index tbody th:first-child  {
		text-align: right;
	}

Possible extra rowspan handling

	table.data  tbody th[rowspan]:not([rowspan='1']),
	table.index tbody th[rowspan]:not([rowspan='1']),
	table.data  tbody td[rowspan]:not([rowspan='1']),
	table.index tbody td[rowspan]:not([rowspan='1']) {
		border-left: 1px solid silver;
	}

	table.data  tbody th[rowspan]:first-child,
	table.index tbody th[rowspan]:first-child,
	table.data  tbody td[rowspan]:first-child,
	table.index tbody td[rowspan]:first-child{
		border-left: 0;
		border-right: 1px solid silver;
	}
*/

/******************************************************************************/
/*                                  Indices                                   */
/******************************************************************************/


/** Table of Contents *********************************************************/

	.toc a {
		/* More spacing; use padding to make it part of the click target. */
		padding-top: 0.1rem;
		/* Larger, more consistently-sized click target */
		display: block;
		/* Reverse color scheme */
		color: black;
		border-color: #3980B5;
		border-bottom-width: 3px !important;
		margin-bottom: 0px !important;
	}
	.toc a:visited {
		border-color: #054572;
	}
	.toc a:not(:focus):not(:hover) {
		/* Allow colors to cascade through from link styling */
		border-bottom-color: transparent;
	}

	.toc, .toc ol, .toc ul, .toc li {
		list-style: none; /* Numbers must be inlined into source */
		/* because generated content isn't search/selectable and markers can't do multilevel yet */
		margin:  0;
		padding: 0;
		line-height: 1.1rem; /* consistent spacing */
	}

	/* ToC not indented until third level, but font style & margins show hierarchy */
	.toc > li             { font-weight: bold;   }
	.toc > li li          { font-weight: normal; }
	.toc > li li li       { font-size:   95%;    }
	.toc > li li li li    { font-size:   90%;    }
	.toc > li li li li .secno { font-size: 85%; }
	.toc > li li li li li { font-size:   85%;    }
	.toc > li li li li li .secno { font-size: 100%; }

	/* @supports not (display:grid) { */
		.toc > li             { margin: 1.5rem 0;    }
		.toc > li li          { margin: 0.3rem 0;    }
		.toc > li li li       { margin-left: 2rem;   }

		/* Section numbers in a column of their own */
		.toc .secno {
			float: left;
			width: 4rem;
			white-space: nowrap;
		}

		.toc li {
			clear: both;
		}

		:not(li) > .toc              { margin-left:  5rem; }
		.toc .secno                  { margin-left: -5rem; }
		.toc > li li li .secno       { margin-left: -7rem; }
		.toc > li li li li .secno    { margin-left: -9rem; }
		.toc > li li li li li .secno { margin-left: -11rem; }

		/* Tighten up indentation in narrow ToCs */
		@media (max-width: 30em) {
			:not(li) > .toc              { margin-left:  4rem; }
			.toc .secno                  { margin-left: -4rem; }
			.toc > li li li              { margin-left:  1rem; }
			.toc > li li li .secno       { margin-left: -5rem; }
			.toc > li li li li .secno    { margin-left: -6rem; }
			.toc > li li li li li .secno { margin-left: -7rem; }
		}
	/* } */

	@supports (display:grid) and (display:contents) {
		/* Use #toc over .toc to override non-@supports rules. */
		#toc {
			display: grid;
			align-content: start;
			grid-template-columns: auto 1fr;
			grid-column-gap: 1rem;
			column-gap: 1rem;
			grid-row-gap: .6rem;
			row-gap: .6rem;
		}
		#toc h2 {
			grid-column: 1 / -1;
			margin-bottom: 0;
		}
		#toc ol,
		#toc li,
		#toc a {
			display: contents;
			/* Switch <a> to subgrid when supported */
		}
		#toc span {
			margin: 0;
		}
		#toc > .toc > li > a > span {
			/* The spans of the top-level list,
			   comprising the first items of each top-level section. */
			margin-top: 1.1rem;
		}
		#toc#toc .secno { /* Ugh, need more specificity to override base.css */
			grid-column: 1;
			width: auto;
			margin-left: 0;
		}
		#toc .content {
			grid-column: 2;
			width: auto;
			margin-right: 1rem;
		}
		#toc .content:hover {
			background: rgba(75%, 75%, 75%, .25);
			border-bottom: 3px solid #054572;
			margin-bottom: -3px;
		}
		#toc li li li .content {
			margin-left: 1rem;
		}
		#toc li li li li .content {
			margin-left: 2rem;
		}
	}


/** Index *********************************************************************/

	/* Index Lists: Layout */
	ul.index       { margin-left: 0; columns: 15em; text-indent: 1em hanging; }
	ul.index li    { margin-left: 0; list-style: none; break-inside: avoid; }
	ul.index li li { margin-left: 1em }
	ul.index dl    { margin-top: 0; }
	ul.index dt    { margin: .2em 0 .2em 20px;}
	ul.index dd    { margin: .2em 0 .2em 40px;}
	/* Index Lists: Typography */
	ul.index ul,
	ul.index dl { font-size: smaller; }
	@media not print {
		ul.index li span {
			white-space: nowrap;
			color: transparent; }
		ul.index li a:hover + span,
		ul.index li a:focus + span {
			color: #707070;
		}
	}

/** Index Tables *****************************************************/
	/* See also the data table styling section, which this effectively subclasses */

	table.index {
		font-size: small;
		border-collapse: collapse;
		border-spacing: 0;
		text-align: left;
		margin: 1em 0;
	}

	table.index td,
	table.index th {
		padding: 0.4em;
	}

	table.index tr:hover td:not([rowspan]),
	table.index tr:hover th:not([rowspan]) {
		background: #f7f8f9;
	}

	/* The link in the first column in the property table (formerly a TD) */
	table.index th:first-child a {
		font-weight: bold;
	}

/******************************************************************************/
/*                                    Print                                   */
/******************************************************************************/

	@media print {
		/* Pages have their own margins. */
		html {
			margin: 0;
		}
		/* Serif for print. */
		body {
			font-family: serif;
		}
	}
	@page {
		margin: 1.5cm 1.1cm;
	}

/******************************************************************************/
/*                                    Legacy                                  */
/******************************************************************************/

	/* This rule is inherited from past style sheets. No idea what it's for. */
	.hide { display: none }



/******************************************************************************/
/*                             Overflow Control                               */
/******************************************************************************/

	.figure .caption, .sidefigure .caption, figcaption {
		/* in case figure is overlarge, limit caption to 50em */
		max-width: 50rem;
		margin-left: auto;
		margin-right: auto;
	}
	.overlarge {
		/* Magic to create good table positioning:
		   "content column" is 50ems wide at max; less on smaller screens.
		   Extra space (after ToC + content) is empty on the right.

		   1. When table < content column, centers table in column.
		   2. When content < table < available, left-aligns.
		   3. When table > available, fills available + scroll bar.
		*/ 
		display: grid;
		grid-template-columns: minmax(0, 50em);
	}
	.overlarge > table {
		/* limit preferred width of table */
		max-width: 50em;
		margin-left: auto;
		margin-right: auto;
	}

	@media (min-width: 55em) {
		.overlarge {
			margin-right: calc(13px + 26.5rem - 50vw);
			max-width: none;
		}
	}
	@media screen and (min-width: 78em) {
		body:not(.toc-inline) .overlarge {
			/* 30.5em body padding 50em content area */
			margin-right: calc(40em - 50vw) !important;
		}
	}
	@media screen and (min-width: 90em) {
		body:not(.toc-inline) .overlarge {
			/* 4em html margin 30.5em body padding 50em content area */
			margin-right: calc(84.5em - 100vw) !important;
		}
	}

	@media not print {
		.overlarge {
			overflow-x: auto;
			/* See Lea Verou's explanation background-attachment:
			 * http://lea.verou.me/2012/04/background-attachment-local/
			 *
			background: top left  / 4em 100% linear-gradient(to right,  #ffffff, rgba(255, 255, 255, 0)) local,
			            top right / 4em 100% linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0)) local,
			            top left  / 1em 100% linear-gradient(to right,  #c3c3c5, rgba(195, 195, 197, 0)) scroll,
			            top right / 1em 100% linear-gradient(to left, #c3c3c5, rgba(195, 195, 197, 0)) scroll,
			            white;
			background-repeat: no-repeat;
			*/
		}
	}
</style>
  <link href="https://www.w3.org/StyleSheets/TR/2016/cg-draft" rel="stylesheet">
  <link href="https://wicg.github.io/portals/" rel="canonical">
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-var-click-highlighting */

    var { cursor: pointer; }
    var.selected0 { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
    var.selected1 { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
    var.selected2 { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
    var.selected3 { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
    var.selected4 { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
    var.selected5 { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
    var.selected6 { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
    </style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */
pre.idl.highlight { color: #708090; }
.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
<style>/* style-wpt */

.wpt-tests-block {
	list-style: none;
	border-left: .5em solid hsl(290, 70%, 60%);
	background: hsl(290, 70%, 95%);
	margin: 1em auto;
	padding: .5em;
	display: grid;
	grid-template-columns: 1fr auto auto;
	grid-column-gap: .5em;
}
.wpt-tests-block::before {
	content: "Tests";
	grid-column: 1/-1;
	color: hsl(290, 70%, 30%);
	text-transform: uppercase;
}
.wpt-test {
	display: contents;
}
.wpt-test > a {
	text-decoration: underline;
	border: none;
}
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"></p>
   <h1 class="p-name no-ref" id="title">Portals</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Draft Community Group Report, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>This version:
     <dd><a class="u-url" href="https://wicg.github.io/portals/">https://wicg.github.io/portals/</a>
     <dt class="editor">Editors:
     <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:jbroman@chromium.org">Jeremy Roman</a> (<span class="p-org org">Google</span>)
     <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:lfg@chromium.org">Lucas Gadani</a> (<span class="p-org org">Google</span>)
    </dl>
   </div>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 the Contributors to the Portals Specification, published by the <a href="https://www.w3.org/community/wicg/">Web Platform Incubator Community Group</a> under the <a href="https://www.w3.org/community/about/agreements/cla/">W3C Community Contributor License Agreement (CLA)</a>.
A human-readable <a href="http://www.w3.org/community/about/agreements/cla-deed/">summary</a> is available. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>This specification defines a mechanism that allows for rendering of, and seamless navigation to, embedded content.</p>
  </div>
  <div data-fill-with="at-risk"></div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> This specification was published by the <a href="https://www.w3.org/community/wicg/">Web Platform Incubator Community Group</a>.
  It is not a W3C Standard nor is it on the W3C Standards Track.

  Please note that under the <a href="https://www.w3.org/community/about/agreements/cla/">W3C Community Contributor License Agreement (CLA)</a> there is a limited opt-out and other conditions apply.

  Learn more about <a href="http://www.w3.org/community/">W3C Community and Business Groups</a>. </p>
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li><a href="#intro"><span class="secno">1</span> <span class="content">Introduction</span></a>
    <li><a href="#concepts"><span class="secno">2</span> <span class="content">Concepts</span></a>
    <li>
     <a href="#api"><span class="secno">3</span> <span class="content">API</span></a>
     <ol class="toc">
      <li><a href="#the-portal-element"><span class="secno">3.1</span> <span class="content">The <code>portal</code> element</span></a>
      <li><a href="#the-portalhost-interface"><span class="secno">3.2</span> <span class="content">The <code>PortalHost</code> interface</span></a>
      <li><a href="#the-portalactivateevent-interface"><span class="secno">3.3</span> <span class="content">The <code>PortalActivateEvent</code> interface</span></a>
      <li><a href="#miscellaneous-extensions"><span class="secno">3.4</span> <span class="content">Miscellaneous extensions</span></a>
     </ol>
    <li>
     <a href="#security-considerations"><span class="secno">4</span> <span class="content">Security Considerations</span></a>
     <ol class="toc">
      <li><a href="#security-overview"><span class="secno">4.1</span> <span class="content">Overview</span></a>
      <li><a href="#csp"><span class="secno">4.2</span> <span class="content">Integration with Content Security Policy</span></a>
      <li><a href="#rfc7034"><span class="secno">4.3</span> <span class="content">Integration with RFC 7034</span></a>
      <li><a href="#fetch-metadata"><span class="secno">4.4</span> <span class="content">Integration with Fetch Metadata Request Headers</span></a>
     </ol>
    <li><a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
      <li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a>
     </ol>
    <li><a href="#idl-index"><span class="secno"></span> <span class="content">IDL Index</span></a>
    <li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a>
   </ol>
  </nav>
  <main>
   <section class="non-normative">
    <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#intro"></a></h2>
    <p><em>This section is non-normative.</em></p>
    <p>This specification extends <a data-link-type="biblio" href="#biblio-html">[HTML]</a> to define a new kind of <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#top-level-browsing-context" id="ref-for-top-level-browsing-context">top-level browsing context</a>,
  which can be embedded in another document, and a mechanism for replacing the contents of another
  top-level browsing context with the previously embedded context.</p>
   </section>
   <section>
    <h2 class="heading settled" data-level="2" id="concepts"><span class="secno">2. </span><span class="content">Concepts</span><a class="self-link" href="#concepts"></a></h2>
    <p>Every <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context" id="ref-for-browsing-context">browsing context</a> has a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="portal-state">portal state</dfn>, which may be "<code>none</code>" (the default), "<code>portal</code>" or "<code>orphaned</code>".
  A <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#nested-browsing-context" id="ref-for-nested-browsing-context">nested browsing context</a> always has the <a data-link-type="dfn" href="#portal-state" id="ref-for-portal-state">portal state</a> "<code>none</code>".</p>
    <div class="note" role="note">
      Briefly, these correspond to: 
     <ul>
      <li data-md>
       <p>"<code>portal</code>": top-level browsing contexts embedded in a <code><a data-link-type="element" href="#elementdef-portal" id="ref-for-elementdef-portal">portal</a></code> element</p>
      <li data-md>
       <p>"<code>orphaned</code>": top-level browsing contexts which have run <code class="idl"><a data-link-type="idl" href="#dom-htmlportalelement-activate" id="ref-for-dom-htmlportalelement-activate">activate</a></code> but have not (yet) been <a data-link-type="dfn" href="#adopt-the-predecessor-browsing-context" id="ref-for-adopt-the-predecessor-browsing-context">adopted</a></p>
      <li data-md>
       <p>"<code>none</code>": all other browsing contexts</p>
     </ul>
     <p><img alt="Diagram of portal state transitions" src="portals-state-transitions.svg" width="100%"></p>
     <p>A top-level "<code>none</code>" context can become "<code>orphaned</code>" by <a data-link-type="dfn" href="#activate-a-portal-browsing-context" id="ref-for-activate-a-portal-browsing-context">activating</a> another context. An "<code>orphaned</code>" context can be <a data-link-type="dfn" href="#adopt-the-predecessor-browsing-context" id="ref-for-adopt-the-predecessor-browsing-context①">adopted</a> to
    become a "<code>portal</code>" context. A "<code>portal</code>" context can become a "<code>none</code>" context by being <a data-link-type="dfn" href="#activate-a-portal-browsing-context" id="ref-for-activate-a-portal-browsing-context①">activated</a> by its <a data-link-type="dfn" href="#host-browsing-context" id="ref-for-host-browsing-context">host browsing context</a>.</p>
     <p>A browsing context can be <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/window-object.html#close-a-browsing-context" id="ref-for-close-a-browsing-context">closed</a> while in any of these states.</p>
    </div>
    <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="portal-browsing-context">portal browsing context</dfn> is a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context" id="ref-for-browsing-context①">browsing context</a> whose <a data-link-type="dfn" href="#portal-state" id="ref-for-portal-state①">portal state</a> is "<code>portal</code>".</p>
    <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="host-element">host element</dfn> of a <a data-link-type="dfn" href="#portal-browsing-context" id="ref-for-portal-browsing-context">portal browsing context</a> is a <code><a data-link-type="element" href="#elementdef-portal" id="ref-for-elementdef-portal①">portal</a></code> element which embeds its rendered output and receives messages sent from the
  portal browsing context.</p>
    <div class="note" role="note"> A <code><a data-link-type="element" href="#elementdef-portal" id="ref-for-elementdef-portal②">portal</a></code> element may only be a <a data-link-type="dfn" href="#host-element" id="ref-for-host-element">host element</a> while it is <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#browsing-context-connected" id="ref-for-browsing-context-connected">browsing-context connected</a> or during the dispatch of the <code class="idl"><a class="idl-code" data-link-type="event" href="#eventdef-window-portalactivate" id="ref-for-eventdef-window-portalactivate">portalactivate</a></code> event from which it was obtained
    using <code class="idl"><a data-link-type="idl" href="#dom-portalactivateevent-adoptpredecessor" id="ref-for-dom-portalactivateevent-adoptpredecessor">adoptPredecessor()</a></code>. </div>
    <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="host-browsing-context">host browsing context</dfn> of a <a data-link-type="dfn" href="#portal-browsing-context" id="ref-for-portal-browsing-context①">portal browsing context</a> is its <a data-link-type="dfn" href="#host-element" id="ref-for-host-element①">host element</a>'s <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-node-document" id="ref-for-concept-node-document">document</a>'s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context" id="ref-for-browsing-context②">browsing context</a>.</p>
    <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="portal-task-source">portal task source</dfn> is a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#task-source" id="ref-for-task-source">task source</a> used for tasks related to the
  portal lifecycle and communication between a <a data-link-type="dfn" href="#portal-browsing-context" id="ref-for-portal-browsing-context②">portal browsing context</a> and its <a data-link-type="dfn" href="#host-browsing-context" id="ref-for-host-browsing-context①">host browsing context</a>.</p>
    <section class="algorithm" data-algorithm="portal-browsing-context-activate">
      To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="activate-a-portal-browsing-context">activate a portal browsing context</dfn> <var>successorBrowsingContext</var> in
    place of <var>predecessorBrowsingContext</var> with data <var>serializeWithTransferResult</var> and promise <var>promise</var>, run the following steps <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel" id="ref-for-in-parallel">in parallel</a>: 
     <ol>
      <li data-md>
       <p><a data-link-type="dfn" href="https://infra.spec.whatwg.org/#assert" id="ref-for-assert">Assert</a>: The <a data-link-type="dfn" href="#portal-state" id="ref-for-portal-state②">portal state</a> of <var>predecessorBrowsingContext</var> is "<code>none</code>".</p>
      <li data-md>
       <p>Set the <a data-link-type="dfn" href="#host-element" id="ref-for-host-element②">host element</a> of <var>successorBrowsingContext</var> to null.</p>
       <p>User agents <em>should</em>, however, attempt to preserve the rendering of the
guest browsing context until <var>predecessorBrowsingContext</var> has been replaced
with <var>successorBrowsingContext</var> in the rendering.</p>
       <p class="note" role="note"><span>Note:</span> This is intended to avoid a visual glitch, such as a "white flash", where
the guest browsing context briefly disappears.</p>
      <li data-md>
       <p>Set the <a data-link-type="dfn" href="#portal-state" id="ref-for-portal-state③">portal state</a> of <var>predecessorBrowsingContext</var> to "<code>orphaned</code>".</p>
      <li data-md>
       <p>Update the user interface to replace <var>predecessorBrowsingContext</var> with <var>successorBrowsingContext</var> (e.g., by updating the tab/window contents and browser chrome).</p>
      <li data-md>
       <p>Let <var>successorWindow</var> be <var>successorBrowsingContext</var>’s associated <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/window-object.html#windowproxy" id="ref-for-windowproxy">WindowProxy</a></code>'s [[Window]] internal slot value.</p>
      <li data-md>
       <p><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task">Queue a task</a> from the <a data-link-type="dfn" href="#portal-task-source" id="ref-for-portal-task-source">portal task source</a> to the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop" id="ref-for-event-loop">event loop</a> associated with <var>successorWindow</var> to run the following steps:</p>
       <ol>
        <li data-md>
         <p><a data-link-type="dfn" href="https://infra.spec.whatwg.org/#assert" id="ref-for-assert①">Assert</a>: The <a data-link-type="dfn" href="#portal-state" id="ref-for-portal-state④">portal state</a> of <var>successorBrowsingContext</var> is "<code>portal</code>".</p>
        <li data-md>
         <p>Set the <a data-link-type="dfn" href="#portal-state" id="ref-for-portal-state⑤">portal state</a> of <var>successorBrowsingContext</var> to "<code>none</code>".</p>
        <li data-md>
         <p>Let <var>targetRealm</var> be <var>successorWindow</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-global-object-realm" id="ref-for-concept-global-object-realm">realm</a>.</p>
        <li data-md>
         <p>Let <var>deserializeRecord</var> be <a data-link-type="abstract-op" href="https://html.spec.whatwg.org/multipage/structured-data.html#structureddeserializewithtransfer" id="ref-for-structureddeserializewithtransfer">StructuredDeserializeWithTransfer</a>(<var>serializeWithTransferResult</var>, <var>targetRealm</var>),
and let <var>dataClone</var> be <var>deserializeRecord</var>.[[Deserialized]].</p>
         <p>If this throws an exception, catch it, and let <var>dataClone</var> be null instead.</p>
        <li data-md>
         <p>Let <var>event</var> be the result of <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-create" id="ref-for-concept-event-create">creating an event</a> using <code class="idl"><a data-link-type="idl" href="#portalactivateevent" id="ref-for-portalactivateevent">PortalActivateEvent</a></code> and <var>targetRealm</var>.</p>
        <li data-md>
         <p>Initialize <var>event</var>’s <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-event-type" id="ref-for-dom-event-type">type</a></code> attribute to <code class="idl"><a class="idl-code" data-link-type="event" href="#eventdef-window-portalactivate" id="ref-for-eventdef-window-portalactivate①">portalactivate</a></code>.</p>
        <li data-md>
         <p>Initialize <var>event</var>’s <code class="idl"><a data-link-type="idl" href="#dom-portalactivateevent-data" id="ref-for-dom-portalactivateevent-data">data</a></code> attribute to <var>dataClone</var>.</p>
        <li data-md>
         <p>Set <var>event</var>’s <a data-link-type="dfn" href="#portalactivateevent-predecessor-browsing-context" id="ref-for-portalactivateevent-predecessor-browsing-context">predecessor browsing context</a> to <var>predecessorBrowsingContext</var>.</p>
        <li data-md>
         <p>Set <var>event</var>’s <a data-link-type="dfn" href="#portalactivateevent-successor-window" id="ref-for-portalactivateevent-successor-window">successor window</a> to <var>successorWindow</var>.</p>
        <li data-md>
         <p>Set <var>event</var>’s <a data-link-type="dfn" href="#portalactivateevent-activation-promise" id="ref-for-portalactivateevent-activation-promise">activation promise</a> to <var>promise</var>.</p>
        <li data-md>
         <p><a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-dispatch" id="ref-for-concept-event-dispatch">Dispatch</a> <var>event</var> to <var>successorWindow</var>.</p>
        <li data-md>
         <p>Let <var>adoptedPredecessorElement</var> be <var>event</var>’s <a data-link-type="dfn" href="#portalactivateevent-adopted-predecessor-element" id="ref-for-portalactivateevent-adopted-predecessor-element">adopted predecessor element</a>.</p>
        <li data-md>
         <p>If <var>adoptedPredecessorElement</var> is not null, then:</p>
         <ol>
          <li data-md>
           <p>Set <var>adoptedPredecessorElement</var>’s <a data-link-type="dfn" href="#htmlportalelement-just-adopted-flag" id="ref-for-htmlportalelement-just-adopted-flag">just-adopted flag</a> to false.</p>
          <li data-md>
           <p>If <var>adoptedPredecessorElement</var> <a data-link-type="dfn" href="#htmlportalelement-may-have-a-guest-browsing-context" id="ref-for-htmlportalelement-may-have-a-guest-browsing-context">may not have a guest browsing context</a> and
its <a data-link-type="dfn" href="#htmlportalelement-guest-browsing-context" id="ref-for-htmlportalelement-guest-browsing-context">guest browsing context</a> is not null, then <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/window-object.html#a-browsing-context-is-discarded" id="ref-for-a-browsing-context-is-discarded">discard</a> it.</p>
           <div class="note" role="note">
             This unceremoniously <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/window-object.html#a-browsing-context-is-discarded" id="ref-for-a-browsing-context-is-discarded①">discards</a> the browsing context, as if the element had been removed from
  the document after previously being attached. This is
  distinct from the case where the predecessor was never
  adopted, below, which <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/window-object.html#close-a-browsing-context" id="ref-for-close-a-browsing-context①">closes</a> the
  browsing context, which dispatches the <code class="idl"><a class="idl-code" data-link-type="event" href="https://html.spec.whatwg.org/multipage/indices.html#event-unload" id="ref-for-event-unload">unload</a></code> event, somewhat similarly to if it
  had performed an ordinary navigation. 
            <p>Typically authors would not call <code class="idl"><a data-link-type="idl" href="#dom-portalactivateevent-adoptpredecessor" id="ref-for-dom-portalactivateevent-adoptpredecessor①">adoptPredecessor()</a></code> unless they intend
  to insert it into the document before the <a data-link-type="dfn" href="#htmlportalelement-just-adopted-flag" id="ref-for-htmlportalelement-just-adopted-flag①">just-adopted flag</a> becomes false.</p>
           </div>
         </ol>
        <li data-md>
         <p>Otherwise:</p>
         <ol>
          <li data-md>
           <p><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task①">Queue a task</a> from the <a data-link-type="dfn" href="#portal-task-source" id="ref-for-portal-task-source①">portal task source</a> to the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop" id="ref-for-event-loop①">event loop</a> associated with <var>predecessorBrowsingContext</var> to resolve <var>promise</var> with undefined.</p>
          <li data-md>
           <p><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/window-object.html#close-a-browsing-context" id="ref-for-close-a-browsing-context②">Close</a> <var>predecessorBrowsingContext</var>.</p>
           <p>The user agent <em>should not</em> ask the user for confirmation during the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#prompt-to-unload-a-document" id="ref-for-prompt-to-unload-a-document">prompt to unload</a> step (and so the browsing context should be <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/window-object.html#a-browsing-context-is-discarded" id="ref-for-a-browsing-context-is-discarded②">discarded</a>).</p>
         </ol>
       </ol>
     </ol>
    </section>
    <ul class="wpt-tests-block">
     <li class="wpt-test"><a href="https://wpt.fyi/results/portals/portal-activate-event.html">portal-activate-event.html</a> <a href="http://web-platform-tests.live/portals/portal-activate-event.html" title="portals/portal-activate-event.html"><small>(live test)</small></a> <a href="https://github.com/web-platform-tests/wpt/blob/master/portals/portal-activate-event.html"><small>(source)</small></a>
     <li class="wpt-test"><a href="https://wpt.fyi/results/portals/portals-host-hidden-after-activation.html">portals-host-hidden-after-activation.html</a> <a href="http://web-platform-tests.live/portals/portals-host-hidden-after-activation.html" title="portals/portals-host-hidden-after-activation.html"><small>(live test)</small></a> <a href="https://github.com/web-platform-tests/wpt/blob/master/portals/portals-host-hidden-after-activation.html"><small>(source)</small></a>
    </ul>
    <div class="issue" id="issue-b49e4903"><a class="self-link" href="#issue-b49e4903"></a> In the case that structured deserialization throws, it may be useful to do something else to indicate it,
    rather than simply providing null data. </div>
    <div class="issue" id="issue-0d72b101"><a class="self-link" href="#issue-0d72b101"></a> We need to specify how the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/history.html#session-history" id="ref-for-session-history">session history</a> of each browsing context is
    affected by activation, and supply non-normative text that explains how
    these histories are expected to be presented to the user. </div>
    <section class="algorithm" data-algorithm="portal-browsing-context-adopt-predecessor">
      To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="adopt-the-predecessor-browsing-context">adopt the predecessor browsing context</dfn> <var>predecessorBrowsingContext</var> in <var>successorWindow</var>, run the following steps: 
     <ol>
      <li data-md>
       <p>Let <var>document</var> be the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/window-object.html#concept-document-window" id="ref-for-concept-document-window">document</a> of <var>successorWindow</var>.</p>
      <li data-md>
       <p>Let <var>portalElement</var> be the result of <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-create-element" id="ref-for-concept-create-element">creating an element</a> given <var>document</var>, <code>portal</code>, and the <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#html-namespace" id="ref-for-html-namespace">HTML namespace</a>.</p>
      <li data-md>
       <p>Set <var>portalElement</var>’s <a data-link-type="dfn" href="#htmlportalelement-just-adopted-flag" id="ref-for-htmlportalelement-just-adopted-flag②">just-adopted flag</a> to true.</p>
      <li data-md>
       <p><a data-link-type="dfn" href="https://infra.spec.whatwg.org/#assert" id="ref-for-assert②">Assert</a>: <var>portalElement</var> is an <code class="idl"><a data-link-type="idl" href="#htmlportalelement" id="ref-for-htmlportalelement">HTMLPortalElement</a></code>.</p>
      <li data-md>
       <p><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task②">Queue a task</a> from the <a data-link-type="dfn" href="#portal-task-source" id="ref-for-portal-task-source②">portal task source</a> to the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop" id="ref-for-event-loop②">event loop</a> associated with <var>predecessorBrowsingContext</var> to run the following steps:</p>
       <ol>
        <li data-md>
         <p><a data-link-type="dfn" href="https://infra.spec.whatwg.org/#assert" id="ref-for-assert③">Assert</a>: The <a data-link-type="dfn" href="#portal-state" id="ref-for-portal-state⑥">portal state</a> of <var>predecessorBrowsingContext</var> is "<code>orphaned</code>".</p>
        <li data-md>
         <p>Set the <a data-link-type="dfn" href="#portal-state" id="ref-for-portal-state⑦">portal state</a> of <var>predecessorBrowsingContext</var> to "<code>portal</code>", and
set the <a data-link-type="dfn" href="#host-element" id="ref-for-host-element③">host element</a> of <var>predecessorBrowsingContext</var> to <var>portalElement</var>.</p>
       </ol>
      <li data-md>
       <p>Return <var>portalElement</var>.</p>
     </ol>
    </section>
    <div class="note" role="note">
      Since the task to set the <a data-link-type="dfn" href="#portal-state" id="ref-for-portal-state⑧">portal state</a>, and thus expose the <code class="idl"><a data-link-type="idl" href="#portalhost" id="ref-for-portalhost">PortalHost</a></code> object, is queued first, and from the same <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#task-source" id="ref-for-task-source①">task source</a>,
    it is exposed at the time the <a data-link-type="dfn" href="#portalactivateevent-activation-promise" id="ref-for-portalactivateevent-activation-promise①">activation promise</a> returned from <code class="idl"><a data-link-type="idl" href="#dom-htmlportalelement-activate" id="ref-for-dom-htmlportalelement-activate①">activate(options)</a></code> is resolved. 
<pre class="highlight"><c- c1>// In the successor document.</c->
onportalactivate <c- o>=</c-> event <c- p>=></c-> <c- p>{</c->
  <c- c1>// The predecessor document is adopted into a &lt;portal> element...</c->
  document<c- p>.</c->body<c- p>.</c->appendChild<c- p>(</c->event<c- p>.</c->adoptPredecessor<c- p>());</c->
<c- p>});</c->

<c- c1>// In the predecessor document.</c->
portalElement<c- p>.</c->activate<c- p>().</c->then<c- p>(()</c-> <c- p>=></c-> <c- p>{</c->
  <c- c1>// ...and it is guaranteed to observe that change by the time the</c->
  <c- c1>// activation promise resolves.</c->
  console<c- p>.</c->assert<c- p>(</c->window<c- p>.</c->portalHost <c- k>instanceof</c-> PortalHost<c- p>);</c->
<c- p>});</c->
</pre>
    </div>
   </section>
   <section>
    <h2 class="heading settled" data-level="3" id="api"><span class="secno">3. </span><span class="content">API</span><a class="self-link" href="#api"></a></h2>
    <h3 class="heading settled" data-level="3.1" id="the-portal-element"><span class="secno">3.1. </span><span class="content">The <code>portal</code> element</span><a class="self-link" href="#the-portal-element"></a></h3>
    <p>A <dfn class="dfn-paneled" data-dfn-type="element" data-export id="elementdef-portal"><code>portal</code></dfn> element allows for a <a data-link-type="dfn" href="#portal-browsing-context" id="ref-for-portal-browsing-context③">portal browsing context</a> to be embedded in an HTML document.</p>
    <ul class="wpt-tests-block">
     <li class="wpt-test"><a href="https://wpt.fyi/results/portals/portals-rendering.html">portals-rendering.html</a> <a href="http://web-platform-tests.live/portals/portals-rendering.html" title="portals/portals-rendering.html"><small>(live test)</small></a> <a href="https://github.com/web-platform-tests/wpt/blob/master/portals/portals-rendering.html"><small>(source)</small></a>
    </ul>
    <p>A <code><a data-link-type="element" href="#elementdef-portal" id="ref-for-elementdef-portal③">portal</a></code> element <var>portalElement</var> has a <dfn class="dfn-paneled" data-dfn-for="HTMLPortalElement" data-dfn-type="dfn" data-lt="guest browsing context" data-noexport id="htmlportalelement-guest-browsing-context">guest
  browsing context</dfn>, which is the <a data-link-type="dfn" href="#portal-browsing-context" id="ref-for-portal-browsing-context④">portal browsing context</a> whose <a data-link-type="dfn" href="#host-element" id="ref-for-host-element④">host
  element</a> is <var>portalElement</var>, or null if no such browsing context exists.</p>
    <p>A <code><a data-link-type="element" href="#elementdef-portal" id="ref-for-elementdef-portal④">portal</a></code> element has a <dfn class="dfn-paneled" data-dfn-for="HTMLPortalElement" data-dfn-type="dfn" data-lt="just-adopted flag" data-noexport id="htmlportalelement-just-adopted-flag">just-adopted
  flag</dfn>, which is a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#boolean" id="ref-for-boolean">boolean</a> and is initially false. It is set during
  dispatch of the <code class="idl"><a class="idl-code" data-link-type="event" href="#eventdef-window-portalactivate" id="ref-for-eventdef-window-portalactivate②">portalactivate</a></code> event.</p>
    <p>The <dfn class="dfn-paneled" data-dfn-for="portal" data-dfn-type="element-attr" data-export id="element-attrdef-portal-src"><code>src</code></dfn> attribute gives the <a data-link-type="dfn" href="https://url.spec.whatwg.org/#concept-url" id="ref-for-concept-url">URL</a> of a
  page that the <a data-link-type="dfn" href="#htmlportalelement-guest-browsing-context" id="ref-for-htmlportalelement-guest-browsing-context①">guest browsing context</a> is to contain. The attribute, if
  present, must be a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/urls-and-fetching.html#valid-non-empty-url-potentially-surrounded-by-spaces" id="ref-for-valid-non-empty-url-potentially-surrounded-by-spaces">valid non-empty URL potentially surrounded by spaces</a>.</p>
    <p>The <dfn class="dfn-paneled" data-dfn-for="portal" data-dfn-type="element-attr" data-export id="element-attrdef-portal-referrerpolicy"><code>referrerpolicy</code></dfn> attribute is a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/urls-and-fetching.html#referrer-policy-attribute" id="ref-for-referrer-policy-attribute">referrer policy attribute</a>.
  Its purpose is to set the <a data-link-type="dfn" href="https://w3c.github.io/webappsec-referrer-policy/#referrer-policy" id="ref-for-referrer-policy">referrer policy</a> used when <a data-link-type="dfn" href="#htmlportalelement-set-the-source-url-of-a-portal-element" id="ref-for-htmlportalelement-set-the-source-url-of-a-portal-element">setting the source URL of a portal element</a>. <a data-link-type="biblio" href="#biblio-referrer-policy">[REFERRER-POLICY]</a></p>
    <p class="note" role="note"> A <code><a data-link-type="element" href="#elementdef-portal" id="ref-for-elementdef-portal⑤">portal</a></code> is similar to an <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-iframe-element" id="ref-for-the-iframe-element">iframe</a></code>, in that it allows another
    browsing context to be embedded.  However, the <a data-link-type="dfn" href="#portal-browsing-context" id="ref-for-portal-browsing-context⑤">portal browsing context</a> hosted by a <code><a data-link-type="element" href="#elementdef-portal" id="ref-for-elementdef-portal⑥">portal</a></code> is part of a separate <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context-group" id="ref-for-browsing-context-group">browsing context group</a>,
    and thus a separate <a data-link-type="dfn" href="http://tc39.github.io/ecma262/#sec-agents" id="ref-for-sec-agents">agent</a>.  The user agent is therefore free to use a
    separate <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop" id="ref-for-event-loop③">event loop</a> for the browsing contexts, even if they are <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/origin.html#same-origin-domain" id="ref-for-same-origin-domain">same
    origin-domain</a>. </p>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed"><c- g>Exposed</c-></a>=<c- n>Window</c->, <a class="idl-code" data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/dom.html#htmlconstructor" id="ref-for-htmlconstructor"><c- g>HTMLConstructor</c-></a>]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="htmlportalelement"><code><c- g>HTMLPortalElement</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/dom.html#htmlelement" id="ref-for-htmlelement"><c- n>HTMLElement</c-></a> {
    [<a class="idl-code" data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions" id="ref-for-cereactions"><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-USVString" id="ref-for-idl-USVString"><c- b>USVString</c-></a> <a class="idl-code" data-link-type="attribute" data-type="USVString" href="#dom-htmlportalelement-src" id="ref-for-dom-htmlportalelement-src"><c- g>src</c-></a>;
    [<a class="idl-code" data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions" id="ref-for-cereactions①"><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString"><c- b>DOMString</c-></a> <a class="idl-code" data-link-type="attribute" data-type="DOMString" href="#dom-htmlportalelement-referrerpolicy" id="ref-for-dom-htmlportalelement-referrerpolicy"><c- g>referrerPolicy</c-></a>;

    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject"><c- g>NewObject</c-></a>] <c- b>Promise</c->&lt;<c- b>void</c->> <a class="idl-code" data-link-type="method" href="#dom-htmlportalelement-activate" id="ref-for-dom-htmlportalelement-activate②"><c- g>activate</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-portalactivateoptions" id="ref-for-dictdef-portalactivateoptions"><c- n>PortalActivateOptions</c-></a> <dfn class="idl-code" data-dfn-for="HTMLPortalElement/activate(options), HTMLPortalElement/activate()" data-dfn-type="argument" data-export id="dom-htmlportalelement-activate-options-options"><code><c- g>options</c-></code><a class="self-link" href="#dom-htmlportalelement-activate-options-options"></a></dfn>);
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-htmlportalelement-postmessage" id="ref-for-dom-htmlportalelement-postmessage"><c- g>postMessage</c-></a>(<c- b>any</c-> <dfn class="idl-code" data-dfn-for="HTMLPortalElement/postMessage(message, targetOrigin, transfer), HTMLPortalElement/postMessage(message, targetOrigin)" data-dfn-type="argument" data-export id="dom-htmlportalelement-postmessage-message-targetorigin-transfer-message"><code><c- g>message</c-></code><a class="self-link" href="#dom-htmlportalelement-postmessage-message-targetorigin-transfer-message"></a></dfn>, <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①"><c- b>DOMString</c-></a> <dfn class="idl-code" data-dfn-for="HTMLPortalElement/postMessage(message, targetOrigin, transfer), HTMLPortalElement/postMessage(message, targetOrigin)" data-dfn-type="argument" data-export id="dom-htmlportalelement-postmessage-message-targetorigin-transfer-targetorigin"><code><c- g>targetOrigin</c-></code><a class="self-link" href="#dom-htmlportalelement-postmessage-message-targetorigin-transfer-targetorigin"></a></dfn>, <c- b>optional</c-> <c- b>sequence</c->&lt;<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-object" id="ref-for-idl-object"><c- b>object</c-></a>> <dfn class="idl-code" data-dfn-for="HTMLPortalElement/postMessage(message, targetOrigin, transfer), HTMLPortalElement/postMessage(message, targetOrigin)" data-dfn-type="argument" data-export id="dom-htmlportalelement-postmessage-message-targetorigin-transfer-transfer"><code><c- g>transfer</c-></code><a class="self-link" href="#dom-htmlportalelement-postmessage-message-targetorigin-transfer-transfer"></a></dfn> = []);
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-htmlportalelement-postmessage-message-options" id="ref-for-dom-htmlportalelement-postmessage-message-options"><c- g>postMessage</c-></a>(<c- b>any</c-> <dfn class="idl-code" data-dfn-for="HTMLPortalElement/postMessage(message, options), HTMLPortalElement/postMessage(message)" data-dfn-type="argument" data-export id="dom-htmlportalelement-postmessage-message-options-message"><code><c- g>message</c-></code><a class="self-link" href="#dom-htmlportalelement-postmessage-message-options-message"></a></dfn>, <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/window-object.html#windowpostmessageoptions" id="ref-for-windowpostmessageoptions"><c- n>WindowPostMessageOptions</c-></a> <dfn class="idl-code" data-dfn-for="HTMLPortalElement/postMessage(message, options), HTMLPortalElement/postMessage(message)" data-dfn-type="argument" data-export id="dom-htmlportalelement-postmessage-message-options-options"><code><c- g>options</c-></code><a class="self-link" href="#dom-htmlportalelement-postmessage-message-options-options"></a></dfn>);

    <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler"><c- n>EventHandler</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLPortalElement" data-dfn-type="attribute" data-export data-type="EventHandler" id="dom-htmlportalelement-onmessage"><code><c- g>onmessage</c-></code></dfn>;
    <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler①"><c- n>EventHandler</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLPortalElement" data-dfn-type="attribute" data-export data-type="EventHandler" id="dom-htmlportalelement-onmessageerror"><code><c- g>onmessageerror</c-></code></dfn>;
};

<c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-portalactivateoptions"><code><c- g>PortalActivateOptions</c-></code></dfn> {
    <c- b>any</c-> <dfn class="dfn-paneled idl-code" data-default="null" data-dfn-for="PortalActivateOptions" data-dfn-type="dict-member" data-export data-type="any " id="dom-portalactivateoptions-data"><code><c- g>data</c-></code></dfn> = <c- b>null</c->;
    <c- b>sequence</c->&lt;<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-object" id="ref-for-idl-object①"><c- b>object</c-></a>> <dfn class="dfn-paneled idl-code" data-default="[]" data-dfn-for="PortalActivateOptions" data-dfn-type="dict-member" data-export data-type="sequence<object> " id="dom-portalactivateoptions-transfer"><code><c- g>transfer</c-></code></dfn> = [];
};
</pre>
    <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLPortalElement" data-dfn-type="attribute" data-export id="dom-htmlportalelement-src"><code>src</code></dfn> IDL attribute must <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-reflect" id="ref-for-concept-reflect">reflect</a> the <code><a data-link-type="element-sub" href="#element-attrdef-portal-src" id="ref-for-element-attrdef-portal-src">src</a></code> content attribute.</p>
    <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLPortalElement" data-dfn-type="attribute" data-export id="dom-htmlportalelement-referrerpolicy"><code>referrerPolicy</code></dfn> IDL attribute must <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-reflect" id="ref-for-concept-reflect①">reflect</a> the <code><a data-link-type="element-sub" href="#element-attrdef-portal-referrerpolicy" id="ref-for-element-attrdef-portal-referrerpolicy">referrerpolicy</a></code> content attribute, <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/common-dom-interfaces.html#limited-to-only-known-values" id="ref-for-limited-to-only-known-values">limited to only known values</a>.</p>
    <section class="algorithm" data-algorithm="htmlportalelement-activate">
      The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLPortalElement" data-dfn-type="method" data-export data-lt="activate(options)|activate()" id="dom-htmlportalelement-activate"><code>activate(<var>options</var>)</code></dfn> method <em>must</em> run these steps: 
     <ol>
      <li data-md>
       <p>Let <var>portalBrowsingContext</var> be the <a data-link-type="dfn" href="#htmlportalelement-guest-browsing-context" id="ref-for-htmlportalelement-guest-browsing-context②">guest browsing context</a> of <a data-link-type="dfn" href="https://heycam.github.io/webidl/#this" id="ref-for-this">this</a>.</p>
      <li data-md>
       <p>If <var>portalBrowsingContext</var> is null, throw an "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#invalidstateerror" id="ref-for-invalidstateerror">InvalidStateError</a></code>" <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException">DOMException</a></code>.</p>
       <ul class="wpt-tests-block">
        <li class="wpt-test"><a href="https://wpt.fyi/results/portals/portals-activate-no-browsing-context.html">portals-activate-no-browsing-context.html</a> <a href="http://web-platform-tests.live/portals/portals-activate-no-browsing-context.html" title="portals/portals-activate-no-browsing-context.html"><small>(live test)</small></a> <a href="https://github.com/web-platform-tests/wpt/blob/master/portals/portals-activate-no-browsing-context.html"><small>(source)</small></a>
       </ul>
      <li data-md>
       <p>Let <var>predecessorBrowsingContext</var> be the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-bc" id="ref-for-concept-document-bc">browsing context</a> of <a data-link-type="dfn" href="https://heycam.github.io/webidl/#this" id="ref-for-this①">this</a>'s <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-node-document" id="ref-for-concept-node-document①">document</a>.</p>
      <li data-md>
       <p>If <var>predecessorBrowsingContext</var> is null, throw an "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#invalidstateerror" id="ref-for-invalidstateerror①">InvalidStateError</a></code>" <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException①">DOMException</a></code>.</p>
      <li data-md>
       <p>If the <a data-link-type="dfn" href="#portal-state" id="ref-for-portal-state⑨">portal state</a> of <var>predecessorBrowsingContext</var> is not "<code>none</code>",
throw an "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#invalidstateerror" id="ref-for-invalidstateerror②">InvalidStateError</a></code>" <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException②">DOMException</a></code>.</p>
       <p class="note" role="note"><span>Note:</span> This means that a <code><a data-link-type="element" href="#elementdef-portal" id="ref-for-elementdef-portal⑦">portal</a></code> element inside a <a data-link-type="dfn" href="#portal-browsing-context" id="ref-for-portal-browsing-context⑥">portal browsing context</a> cannot be activated.</p>
      <li data-md>
       <p>Let <var>serializeWithTransferResult</var> be <a data-link-type="abstract-op" href="https://html.spec.whatwg.org/multipage/structured-data.html#structuredserializewithtransfer" id="ref-for-structuredserializewithtransfer">StructuredSerializeWithTransfer</a>(<var>options</var>["<code class="idl"><a data-link-type="idl" href="#dom-portalactivateoptions-data" id="ref-for-dom-portalactivateoptions-data">data</a></code>"], <var>options</var>["<code class="idl"><a data-link-type="idl" href="#dom-portalactivateoptions-transfer" id="ref-for-dom-portalactivateoptions-transfer">transfer</a></code>"]).
Rethrow any exceptions.</p>
      <li data-md>
       <p>Let <var>promise</var> be a new <a data-link-type="dfn" href="http://tc39.github.io/ecma262/#sec-promise-objects" id="ref-for-sec-promise-objects">promise</a>.</p>
      <li data-md>
       <p>Run the steps to <a data-link-type="dfn" href="#activate-a-portal-browsing-context" id="ref-for-activate-a-portal-browsing-context②">activate</a> <var>portalBrowsingContext</var> in place of <var>predecessorBrowsingContext</var> with data <var>serializeWithTransferResult</var> and
promise <var>promise</var>.</p>
      <li data-md>
       <p>Return <var>promise</var>.</p>
     </ol>
     <ul class="wpt-tests-block">
      <li class="wpt-test"><a href="https://wpt.fyi/results/portals/portal-activate-data.html">portal-activate-data.html</a> <a href="http://web-platform-tests.live/portals/portal-activate-data.html" title="portals/portal-activate-data.html"><small>(live test)</small></a> <a href="https://github.com/web-platform-tests/wpt/blob/master/portals/portal-activate-data.html"><small>(source)</small></a>
      <li class="wpt-test"><a href="https://wpt.fyi/results/portals/portals-activate-inside-iframe.html">portals-activate-inside-iframe.html</a> <a href="http://web-platform-tests.live/portals/portals-activate-inside-iframe.html" title="portals/portals-activate-inside-iframe.html"><small>(live test)</small></a> <a href="https://github.com/web-platform-tests/wpt/blob/master/portals/portals-activate-inside-iframe.html"><small>(source)</small></a>
      <li class="wpt-test"><a href="https://wpt.fyi/results/portals/portals-activate-inside-portal.html">portals-activate-inside-portal.html</a> <a href="http://web-platform-tests.live/portals/portals-activate-inside-portal.html" title="portals/portals-activate-inside-portal.html"><small>(live test)</small></a> <a href="https://github.com/web-platform-tests/wpt/blob/master/portals/portals-activate-inside-portal.html"><small>(source)</small></a>
      <li class="wpt-test"><a href="https://wpt.fyi/results/portals/portals-activate-resolution.html">portals-activate-resolution.html</a> <a href="http://web-platform-tests.live/portals/portals-activate-resolution.html" title="portals/portals-activate-resolution.html"><small>(live test)</small></a> <a href="https://github.com/web-platform-tests/wpt/blob/master/portals/portals-activate-resolution.html"><small>(source)</small></a>
      <li class="wpt-test"><a href="https://wpt.fyi/results/portals/portals-activate-twice.html">portals-activate-twice.html</a> <a href="http://web-platform-tests.live/portals/portals-activate-twice.html" title="portals/portals-activate-twice.html"><small>(live test)</small></a> <a href="https://github.com/web-platform-tests/wpt/blob/master/portals/portals-activate-twice.html"><small>(source)</small></a>
     </ul>
    </section>
    <section class="algorithm" data-algorithm="htmlportalelement-postmessage">
      The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLPortalElement" data-dfn-type="method" data-export data-lt="postMessage(message, targetOrigin, transfer)|postMessage(message, targetOrigin)" id="dom-htmlportalelement-postmessage"><code>postMessage(<var>message</var>, <var>targetOrigin</var>, <var>transfer</var>)</code></dfn> method <em>must</em> run these steps: 
     <ol>
      <li data-md>
       <p>Let <var>options</var> be « "<code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/window-object.html#windowpostmessageoptions" id="ref-for-windowpostmessageoptions①">targetOrigin</a></code>" → <var>targetOrigin</var>, "<code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/web-messaging.html#postmessageoptions" id="ref-for-postmessageoptions">transfer</a></code>" → <var>transfer</var> ».</p>
      <li data-md>
       <p>Run the steps for <code class="idl"><a data-link-type="idl" href="#dom-htmlportalelement-postmessage-message-options" id="ref-for-dom-htmlportalelement-postmessage-message-options①">postMessage</a></code>(<var>message</var>, <var>options</var>).</p>
     </ol>
     <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="HTMLPortalElement" data-dfn-type="method" data-export data-lt="postMessage(message, options)|postMessage(message)" id="dom-htmlportalelement-postmessage-message-options"><code>postMessage(<var>message</var>, <var>options</var>)</code></dfn> method <em>must</em> run these steps:</p>
     <ol>
      <li data-md>
       <p>Let <var>portalBrowsingContext</var> be the <a data-link-type="dfn" href="#htmlportalelement-guest-browsing-context" id="ref-for-htmlportalelement-guest-browsing-context③">guest browsing context</a> of <a data-link-type="dfn" href="https://heycam.github.io/webidl/#this" id="ref-for-this②">this</a>.</p>
      <li data-md>
       <p>If <var>portalBrowsingContext</var> is null, throw an "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#invalidstateerror" id="ref-for-invalidstateerror③">InvalidStateError</a></code>" <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException③">DOMException</a></code>.</p>
      <li data-md>
       <p>Let <var>settings</var> be the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#relevant-settings-object" id="ref-for-relevant-settings-object">relevant settings object</a> of <a data-link-type="dfn" href="https://heycam.github.io/webidl/#this" id="ref-for-this③">this</a>.</p>
      <li data-md>
       <p>Let <var>origin</var> be the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/origin.html#ascii-serialisation-of-an-origin" id="ref-for-ascii-serialisation-of-an-origin">serialization</a> of <var>settings</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-settings-object-origin" id="ref-for-concept-settings-object-origin">origin</a>.</p>
      <li data-md>
       <p>Let <var>targetOrigin</var> be <var>options</var>["<code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/window-object.html#windowpostmessageoptions" id="ref-for-windowpostmessageoptions②">targetOrigin</a></code>"].</p>
      <li data-md>
       <p>If <var>targetOrigin</var> is a single U+002F SOLIDUS character (/), then set <var>targetOrigin</var> to the <span spec-section="#concept-settings-object-origin">origin</span> of <var>settings</var>.</p>
      <li data-md>
       <p>Otherwise, if <var>targetOrigin</var> is not a single U+002A ASTERISK character (*), then:</p>
       <ol>
        <li data-md>
         <p>Let <var>parsedURL</var> be the result of running the <a data-link-type="dfn" href="https://url.spec.whatwg.org/#concept-url-parser" id="ref-for-concept-url-parser">URL parser</a> on <var>targetOrigin</var>.</p>
        <li data-md>
         <p>If <var>parsedURL</var> is failure, then throw a "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#syntaxerror" id="ref-for-syntaxerror">SyntaxError</a></code>" <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException④">DOMException</a></code>.</p>
        <li data-md>
         <p>Set <var>targetOrigin</var> to <var>parsedURL</var>’s <a data-link-type="dfn" href="https://url.spec.whatwg.org/#concept-url-origin" id="ref-for-concept-url-origin">origin</a>.</p>
       </ol>
      <li data-md>
       <p>Let <var>transfer</var> be <var>options</var>["<code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/window-object.html#windowpostmessageoptions" id="ref-for-windowpostmessageoptions③">transfer</a></code>"].</p>
      <li data-md>
       <p>Let <var>serializeWithTransferResult</var> be <a data-link-type="abstract-op" href="https://html.spec.whatwg.org/multipage/structured-data.html#structuredserializewithtransfer" id="ref-for-structuredserializewithtransfer①">StructuredSerializeWithTransfer</a>(<var>message</var>, <var>transfer</var>). Rethrow any exceptions.</p>
      <li data-md>
       <p><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task③">Queue a task</a> from the <a data-link-type="dfn" href="#portal-task-source" id="ref-for-portal-task-source③">portal task source</a> to the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop" id="ref-for-event-loop④">event loop</a> of <var>portalBrowsingContext</var> to run the following steps:</p>
       <ol>
        <li data-md>
         <p>If <var>targetOrigin</var> is not a single literal U+002A ASTERISK character
(*) and the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/origin.html#concept-origin" id="ref-for-concept-origin">origin</a> of <var>portalBrowsingContext</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#active-document" id="ref-for-active-document">active document</a> is not <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/origin.html#same-origin" id="ref-for-same-origin">same origin</a> with <var>targetOrigin</var>, then
abort these steps.</p>
        <li data-md>
         <p>Let <var>targetWindow</var> be <var>portalBrowsingContext</var>’s associated <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/window-object.html#windowproxy" id="ref-for-windowproxy①">WindowProxy</a></code>'s [[Window]] internal slot value.</p>
        <li data-md>
         <p>Let <var>portalHost</var> be the <var>targetWindow</var>’s <a data-link-type="dfn" href="#portal-host-object" id="ref-for-portal-host-object">portal host object</a>.</p>
        <li data-md>
         <p>Let <var>targetRealm</var> be the <var>targetWindow</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-global-object-realm" id="ref-for-concept-global-object-realm①">realm</a>.</p>
        <li data-md>
         <p>Let <var>deserializeRecord</var> be <a data-link-type="abstract-op" href="https://html.spec.whatwg.org/multipage/structured-data.html#structureddeserializewithtransfer" id="ref-for-structureddeserializewithtransfer①">StructuredDeserializeWithTransfer</a>(<var>serializeWithTransferResult</var>, <var>targetRealm</var>).</p>
         <p>If this throws an exception, catch it, <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-fire" id="ref-for-concept-event-fire">fire an event</a> named <code class="idl"><a class="idl-code" data-link-type="event" href="#eventdef-portalhost-messageerror" id="ref-for-eventdef-portalhost-messageerror">messageerror</a></code> at <var>portalHost</var> using <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/comms.html#messageevent" id="ref-for-messageevent">MessageEvent</a></code> with the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/comms.html#dom-messageevent-origin" id="ref-for-dom-messageevent-origin">origin</a></code> attribute initialized to <var>origin</var> and the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/comms.html#dom-messageevent-source" id="ref-for-dom-messageevent-source">source</a></code> attribute initialized to <var>portalHost</var>,
then abort these steps.</p>
        <li data-md>
         <p>Let <var>messageClone</var> be <var>deserializeRecord</var>.[[Deserialized]].</p>
        <li data-md>
         <p>Let <var>newPorts</var> be a new <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-frozen-array-type" id="ref-for-dfn-frozen-array-type">frozen array</a> consisting of all <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/web-messaging.html#messageport" id="ref-for-messageport">MessagePort</a></code> objects in <var>deserializeRecord</var>.[[TransferredValues]], if any, maintaining their relative order.</p>
        <li data-md>
         <p><a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-fire" id="ref-for-concept-event-fire①">Fire an event</a> named <code class="idl"><a class="idl-code" data-link-type="event" href="#eventdef-portalhost-message" id="ref-for-eventdef-portalhost-message">message</a></code> at <var>portalHost</var> using <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/comms.html#messageevent" id="ref-for-messageevent①">MessageEvent</a></code>, with the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/comms.html#dom-messageevent-origin" id="ref-for-dom-messageevent-origin①">origin</a></code> attribute
initialized to <var>origin</var>, the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/comms.html#dom-messageevent-source" id="ref-for-dom-messageevent-source①">source</a></code> attribute initialized to <var>portalHost</var>, the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/comms.html#dom-messageevent-data" id="ref-for-dom-messageevent-data">data</a></code> attribute
initialized to <var>messageClone</var>, and the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/comms.html#dom-messageevent-ports" id="ref-for-dom-messageevent-ports">ports</a></code> attribute initialized to <var>newPorts</var>.</p>
       </ol>
     </ol>
     <ul class="wpt-tests-block">
      <li class="wpt-test"><a href="https://wpt.fyi/results/portals/portals-post-message.sub.html">portals-post-message.sub.html</a> <a href="http://web-platform-tests.live/portals/portals-post-message.sub.html" title="portals/portals-post-message.sub.html"><small>(live test)</small></a> <a href="https://github.com/web-platform-tests/wpt/blob/master/portals/portals-post-message.sub.html"><small>(source)</small></a>
     </ul>
    </section>
    <section class="algorithm" data-algorithm="htmlportalelement-may-have-guest-browsing-context">
      To determine whether a <code><a data-link-type="element" href="#elementdef-portal" id="ref-for-elementdef-portal⑧">portal</a></code> element <dfn class="dfn-paneled" data-dfn-for="HTMLPortalElement" data-dfn-type="dfn" data-noexport id="htmlportalelement-may-have-a-guest-browsing-context">may have a guest browsing context</dfn>, run the following steps: 
     <ol>
      <li data-md>
       <p>If <var>element</var>’s <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-node-document" id="ref-for-concept-node-document②">document</a>'s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context" id="ref-for-browsing-context③">browsing context</a> is not a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#top-level-browsing-context" id="ref-for-top-level-browsing-context①">top-level browsing context</a>, then return false.</p>
       <ul class="wpt-tests-block">
        <li class="wpt-test"><a href="https://wpt.fyi/results/portals/portals-nested.html">portals-nested.html</a> <a href="http://web-platform-tests.live/portals/portals-nested.html" title="portals/portals-nested.html"><small>(live test)</small></a> <a href="https://github.com/web-platform-tests/wpt/blob/master/portals/portals-nested.html"><small>(source)</small></a>
       </ul>
       <p class="note" role="note"> The user agent may choose to emit a warning if the author attempts to
  use a <code><a data-link-type="element" href="#elementdef-portal" id="ref-for-elementdef-portal⑨">portal</a></code> element in a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#nested-browsing-context" id="ref-for-nested-browsing-context①">nested browsing context</a>, as this is not
  supported. </p>
      <li data-md>
       <p>If <var>element</var> is <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#browsing-context-connected" id="ref-for-browsing-context-connected①">browsing-context connected</a>, then return true.</p>
      <li data-md>
       <p>If <var>element</var>’s <a data-link-type="dfn" href="#htmlportalelement-just-adopted-flag" id="ref-for-htmlportalelement-just-adopted-flag③">just-adopted flag</a> is true, then return true.</p>
      <li data-md>
       <p>Return false.</p>
     </ol>
    </section>
    <section class="algorithm" data-algorithm="htmlportalelement-close">
      To <dfn class="dfn-paneled" data-dfn-for="HTMLPortalElement" data-dfn-type="dfn" data-noexport id="htmlportalelement-close-a-portal-element">close a <code><a data-link-type="element" href="#elementdef-portal" id="ref-for-elementdef-portal①⓪">portal</a></code> element</dfn> <var>element</var>, run the following steps: 
     <ol>
      <li data-md>
       <p>If <var>element</var>’s <a data-link-type="dfn" href="#htmlportalelement-guest-browsing-context" id="ref-for-htmlportalelement-guest-browsing-context④">guest browsing context</a> is not null, then <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/window-object.html#close-a-browsing-context" id="ref-for-close-a-browsing-context③">close</a> it.</p>
       <p>The user agent <em>should not</em> ask the user for confirmation during the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#prompt-to-unload-a-document" id="ref-for-prompt-to-unload-a-document①">prompt to unload</a> step (and so the browsing context should be <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/window-object.html#a-browsing-context-is-discarded" id="ref-for-a-browsing-context-is-discarded③">discarded</a>).</p>
     </ol>
    </section>
    <section class="algorithm" data-algorithm="htmlportalelement-setsourceurl">
      To <dfn class="dfn-paneled" data-dfn-for="HTMLPortalElement" data-dfn-type="dfn" data-noexport id="htmlportalelement-set-the-source-url-of-a-portal-element">set the source URL of a <code><a data-link-type="element" href="#elementdef-portal" id="ref-for-elementdef-portal①①">portal</a></code> element</dfn> <var>element</var>, run the following steps: 
     <ol>
      <li data-md>
       <p><a data-link-type="dfn" href="https://infra.spec.whatwg.org/#assert" id="ref-for-assert④">Assert</a>: <var>element</var> <a data-link-type="dfn" href="#htmlportalelement-may-have-a-guest-browsing-context" id="ref-for-htmlportalelement-may-have-a-guest-browsing-context①">may have a guest browsing context</a>.</p>
      <li data-md>
       <p>Let <var>hostBrowsingContext</var> be <var>element</var>’s <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-node-document" id="ref-for-concept-node-document③">document</a>'s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context" id="ref-for-browsing-context④">browsing context</a>.</p>
      <li data-md>
       <p><a data-link-type="dfn" href="https://infra.spec.whatwg.org/#assert" id="ref-for-assert⑤">Assert</a>: <var>hostBrowsingContext</var> is a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#top-level-browsing-context" id="ref-for-top-level-browsing-context②">top-level browsing context</a>.</p>
      <li data-md>
       <p>If <var>element</var> has no <code><a data-link-type="element-sub" href="#element-attrdef-portal-src" id="ref-for-element-attrdef-portal-src①">src</a></code> attribute specified, or its value is the empty string,
then <a data-link-type="dfn" href="#htmlportalelement-close-a-portal-element" id="ref-for-htmlportalelement-close-a-portal-element">close</a> <var>element</var> and return.</p>
      <li data-md>
       <p><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/urls-and-fetching.html#parse-a-url" id="ref-for-parse-a-url">Parse</a> the value of the <code><a data-link-type="element-sub" href="#element-attrdef-portal-src" id="ref-for-element-attrdef-portal-src②">src</a></code> attribute. If that is not successful,
then <a data-link-type="dfn" href="#htmlportalelement-close-a-portal-element" id="ref-for-htmlportalelement-close-a-portal-element①">close</a> <var>element</var> and return.</p>
       <p>Otherwise, let <var>url</var> be the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/urls-and-fetching.html#resulting-url-record" id="ref-for-resulting-url-record">resulting URL record</a>.</p>
      <li data-md>
       <p>If the <a data-link-type="dfn" href="https://url.spec.whatwg.org/#concept-url-scheme" id="ref-for-concept-url-scheme">scheme</a> of <var>url</var> is not an <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#http-scheme" id="ref-for-http-scheme">HTTP(S) scheme</a>, then <a data-link-type="dfn" href="#htmlportalelement-close-a-portal-element" id="ref-for-htmlportalelement-close-a-portal-element②">close</a> <var>element</var> and return.</p>
      <li data-md>
       <p>If <var>element</var>’s <a data-link-type="dfn" href="#htmlportalelement-guest-browsing-context" id="ref-for-htmlportalelement-guest-browsing-context⑤">guest browsing context</a> is null, then run the following steps:</p>
       <ol>
        <li data-md>
         <p>Let <var>newBrowsingContext</var> be the result of <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#creating-a-new-top-level-browsing-context" id="ref-for-creating-a-new-top-level-browsing-context">creating a new top-level browsing context</a>.</p>
        <li data-md>
         <p>Set the <a data-link-type="dfn" href="#portal-state" id="ref-for-portal-state①⓪">portal state</a> of <var>newBrowsingContext</var> to "<code>portal</code>", and set
the <a data-link-type="dfn" href="#host-element" id="ref-for-host-element⑤">host element</a> of <var>newBrowsingContext</var> to <var>element</var>.</p>
       </ol>
      <li data-md>
       <p>Let <var>guestBrowsingContext</var> be <var>element</var>’s <a data-link-type="dfn" href="#htmlportalelement-guest-browsing-context" id="ref-for-htmlportalelement-guest-browsing-context⑥">guest browsing context</a>.</p>
      <li data-md>
       <p><a data-link-type="dfn" href="https://infra.spec.whatwg.org/#assert" id="ref-for-assert⑥">Assert</a>: <var>guestBrowsingContext</var> is not null.</p>
      <li data-md>
       <p>Let <var>resource</var> be a new <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-request" id="ref-for-concept-request">request</a> whose <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-request-url" id="ref-for-concept-request-url">URL</a> is <var>url</var> and whose <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-request-referrer-policy" id="ref-for-concept-request-referrer-policy">referrer policy</a> is the current state of <var>element</var>’s <code><a data-link-type="element-sub" href="#element-attrdef-portal-referrerpolicy" id="ref-for-element-attrdef-portal-referrerpolicy①">referrerpolicy</a></code> content attribute.</p>
      <li data-md>
       <p><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#navigate" id="ref-for-navigate">Navigate</a> <var>guestBrowsingContext</var> to <var>resource</var>.</p>
     </ol>
     <div class="note" role="note">
       Unlike an <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-iframe-element" id="ref-for-the-iframe-element①">iframe</a></code> element, a <code><a data-link-type="element" href="#elementdef-portal" id="ref-for-elementdef-portal①②">portal</a></code> element supports a state where
      it has no associated browsing context. This is the initial state of a <code><a data-link-type="element" href="#elementdef-portal" id="ref-for-elementdef-portal①③">portal</a></code> element (i.e., it has no initial <code>about:blank</code> document;
      instead it navigates directly to the first parsable URL assigned to it). 
      <p>Similarly, a <code><a data-link-type="element" href="#elementdef-portal" id="ref-for-elementdef-portal①④">portal</a></code> element responds to an unparsable <code><a data-link-type="element-sub" href="#element-attrdef-portal-src" id="ref-for-element-attrdef-portal-src③">src</a></code> URL by <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/window-object.html#close-a-browsing-context" id="ref-for-close-a-browsing-context④">closing</a> its browsing context, rather
      than by navigating to <code>about:blank</code>.</p>
     </div>
    </section>
    <ul class="wpt-tests-block">
     <li class="wpt-test"><a href="https://wpt.fyi/results/portals/portal-non-http-navigation.html">portal-non-http-navigation.html</a> <a href="http://web-platform-tests.live/portals/portal-non-http-navigation.html" title="portals/portal-non-http-navigation.html"><small>(live test)</small></a> <a href="https://github.com/web-platform-tests/wpt/blob/master/portals/portal-non-http-navigation.html"><small>(source)</small></a>
     <li class="wpt-test"><a href="https://wpt.fyi/results/portals/portals-cross-origin-load.sub.html">portals-cross-origin-load.sub.html</a> <a href="http://web-platform-tests.live/portals/portals-cross-origin-load.sub.html" title="portals/portals-cross-origin-load.sub.html"><small>(live test)</small></a> <a href="https://github.com/web-platform-tests/wpt/blob/master/portals/portals-cross-origin-load.sub.html"><small>(source)</small></a>
     <li class="wpt-test"><a href="https://wpt.fyi/results/portals/portals-referrer.html">portals-referrer.html</a> <a href="http://web-platform-tests.live/portals/portals-referrer.html" title="portals/portals-referrer.html"><small>(live test)</small></a> <a href="https://github.com/web-platform-tests/wpt/blob/master/portals/portals-referrer.html"><small>(source)</small></a>
     <li class="wpt-test"><a href="https://wpt.fyi/results/portals/portals-referrer-inherit-header.html">portals-referrer-inherit-header.html</a> <a href="http://web-platform-tests.live/portals/portals-referrer-inherit-header.html" title="portals/portals-referrer-inherit-header.html"><small>(live test)</small></a> <a href="https://github.com/web-platform-tests/wpt/blob/master/portals/portals-referrer-inherit-header.html"><small>(source)</small></a>
     <li class="wpt-test"><a href="https://wpt.fyi/results/portals/portals-referrer-inherit-meta.html">portals-referrer-inherit-meta.html</a> <a href="http://web-platform-tests.live/portals/portals-referrer-inherit-meta.html" title="portals/portals-referrer-inherit-meta.html"><small>(live test)</small></a> <a href="https://github.com/web-platform-tests/wpt/blob/master/portals/portals-referrer-inherit-meta.html"><small>(source)</small></a>
    </ul>
    <p>Whenever a <code><a data-link-type="element" href="#elementdef-portal" id="ref-for-elementdef-portal①⑤">portal</a></code> element <var>element</var> has its <code><a data-link-type="element-sub" href="#element-attrdef-portal-src" id="ref-for-element-attrdef-portal-src④">src</a></code> attribute set,
  changed, or removed, run the following steps:</p>
    <ol>
     <li data-md>
      <p>If <var>element</var> <a data-link-type="dfn" href="#htmlportalelement-may-have-a-guest-browsing-context" id="ref-for-htmlportalelement-may-have-a-guest-browsing-context②">may have a guest browsing context</a>, then <a data-link-type="dfn" href="#htmlportalelement-set-the-source-url-of-a-portal-element" id="ref-for-htmlportalelement-set-the-source-url-of-a-portal-element①">set the source URL</a> of <var>element</var>.</p>
    </ol>
    <p>Whenever a <code><a data-link-type="element" href="#elementdef-portal" id="ref-for-elementdef-portal①⑥">portal</a></code> element <var>element</var> <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#becomes-browsing-context-connected" id="ref-for-becomes-browsing-context-connected">becomes browsing-context connected</a>, run the following steps:</p>
    <ol>
     <li data-md>
      <p>If <var>element</var> <a data-link-type="dfn" href="#htmlportalelement-may-have-a-guest-browsing-context" id="ref-for-htmlportalelement-may-have-a-guest-browsing-context③">may not have a guest browsing context</a>, then abort these steps.</p>
     <li data-md>
      <p>If <var>element</var>’s <a data-link-type="dfn" href="#htmlportalelement-guest-browsing-context" id="ref-for-htmlportalelement-guest-browsing-context⑦">guest browsing context</a> is not null, then abort these steps.</p>
      <div class="note" role="note"> This ensures that a newly <a data-link-type="dfn" href="#adopt-the-predecessor-browsing-context" id="ref-for-adopt-the-predecessor-browsing-context②">adopted</a> <code><a data-link-type="element" href="#elementdef-portal" id="ref-for-elementdef-portal①⑦">portal</a></code> element can be inserted into the document without navigating
    it. </div>
     <li data-md>
      <p><a data-link-type="dfn" href="#htmlportalelement-set-the-source-url-of-a-portal-element" id="ref-for-htmlportalelement-set-the-source-url-of-a-portal-element②">Set the source URL</a> of <var>element</var>.</p>
    </ol>
    <p>Whenever a <code><a data-link-type="element" href="#elementdef-portal" id="ref-for-elementdef-portal①⑧">portal</a></code> element <var>element</var> <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#becomes-browsing-context-disconnected" id="ref-for-becomes-browsing-context-disconnected">becomes browsing-context disconnected</a>, run the following steps:</p>
    <ol>
     <li data-md>
      <p>If <var>element</var> <a data-link-type="dfn" href="#htmlportalelement-may-have-a-guest-browsing-context" id="ref-for-htmlportalelement-may-have-a-guest-browsing-context④">may not have a guest browsing context</a> and its <a data-link-type="dfn" href="#htmlportalelement-guest-browsing-context" id="ref-for-htmlportalelement-guest-browsing-context⑧">guest browsing context</a> is not null, then <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/window-object.html#a-browsing-context-is-discarded" id="ref-for-a-browsing-context-is-discarded④">discard</a> it.</p>
    </ol>
    <div class="issue" id="issue-833dc9f1"><a class="self-link" href="#issue-833dc9f1"></a> It might be convenient to not immediately detach the portal element, but instead to do so
    in a microtask. This would allow developers to reinsert the <code><a data-link-type="element" href="#elementdef-portal" id="ref-for-elementdef-portal①⑨">portal</a></code> element without losing
    its browsing context. </div>
    <p>Whenever a <code><a data-link-type="element" href="#elementdef-portal" id="ref-for-elementdef-portal②⓪">portal</a></code> element <var>element</var> is <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-node-adopt-ext" id="ref-for-concept-node-adopt-ext">adopted</a>, run the following steps:</p>
    <ol>
     <li data-md>
      <p>Let <var>guestBrowsingContext</var> be <var>element</var>’s <a data-link-type="dfn" href="#htmlportalelement-guest-browsing-context" id="ref-for-htmlportalelement-guest-browsing-context⑨">guest browsing context</a>.</p>
     <li data-md>
      <p>If <var>guestBrowsingContext</var> is null, then abort these steps.</p>
     <li data-md>
      <p><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/window-object.html#a-browsing-context-is-discarded" id="ref-for-a-browsing-context-is-discarded⑤">Discard</a> <var>guestBrowsingContext</var>.</p>
    </ol>
    <div class="note" role="note">
      In particular, this means a <code><a data-link-type="element" href="#elementdef-portal" id="ref-for-elementdef-portal②①">portal</a></code> element loses its <a data-link-type="dfn" href="#htmlportalelement-guest-browsing-context" id="ref-for-htmlportalelement-guest-browsing-context①⓪">guest browsing
    context</a> if it is moved to the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#active-document" id="ref-for-active-document①">active document</a> of a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#nested-browsing-context" id="ref-for-nested-browsing-context②">nested browsing
    context</a>. 
     <p>Similarly, the steps when a <code><a data-link-type="element" href="#elementdef-portal" id="ref-for-elementdef-portal②②">portal</a></code> element’s <a data-link-type="dfn" href="#htmlportalelement-set-the-source-url-of-a-portal-element" id="ref-for-htmlportalelement-set-the-source-url-of-a-portal-element③">source URL is set</a> prevent
    elements from creating a new <a data-link-type="dfn" href="#htmlportalelement-guest-browsing-context" id="ref-for-htmlportalelement-guest-browsing-context①①">guest browsing context</a> while inside such
    documents.</p>
     <p>It is therefore impossible to embed a <a data-link-type="dfn" href="#portal-browsing-context" id="ref-for-portal-browsing-context⑦">portal browsing context</a> in a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#nested-browsing-context" id="ref-for-nested-browsing-context③">nested browsing context</a>.</p>
    </div>
    <p>The following events are dispatched on <code class="idl"><a data-link-type="idl" href="#htmlportalelement" id="ref-for-htmlportalelement①">HTMLPortalElement</a></code> objects:</p>
    <table class="data">
     <thead>
      <tr>
       <th>Event name
       <th>Interface
       <th>Dispatched when
     <tbody>
      <tr>
       <td><dfn class="dfn-paneled idl-code" data-dfn-for="HTMLPortalElement" data-dfn-type="event" data-export id="eventdef-htmlportalelement-message"><code>message</code></dfn>
       <td><code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/comms.html#messageevent" id="ref-for-messageevent②">MessageEvent</a></code>
       <td>A message is received by the object, and deserialization does not throw an exception.
      <tr>
       <td><dfn class="dfn-paneled idl-code" data-dfn-for="HTMLPortalElement" data-dfn-type="event" data-export id="eventdef-htmlportalelement-messageerror"><code>messageerror</code></dfn>
       <td><code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/comms.html#messageevent" id="ref-for-messageevent③">MessageEvent</a></code>
       <td>A message is received by the object, but deserialization throws an exception.
    </table>
    <p>The <code><a data-link-type="element" href="#elementdef-portal" id="ref-for-elementdef-portal②③">portal</a></code> element exposes <code class="idl"><a data-link-type="idl" href="#dom-htmlportalelement-onmessage" id="ref-for-dom-htmlportalelement-onmessage">onmessage</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-htmlportalelement-onmessageerror" id="ref-for-dom-htmlportalelement-onmessageerror">onmessageerror</a></code> as <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-content-attributes" id="ref-for-event-handler-content-attributes">event handler content attributes</a>.</p>
    <ul class="wpt-tests-block">
     <li class="wpt-test"><a href="https://wpt.fyi/results/portals/htmlportalelement-event-handler-content-attributes.html">htmlportalelement-event-handler-content-attributes.html</a> <a href="http://web-platform-tests.live/portals/htmlportalelement-event-handler-content-attributes.html" title="portals/htmlportalelement-event-handler-content-attributes.html"><small>(live test)</small></a> <a href="https://github.com/web-platform-tests/wpt/blob/master/portals/htmlportalelement-event-handler-content-attributes.html"><small>(source)</small></a>
    </ul>
    <h3 class="heading settled" data-level="3.2" id="the-portalhost-interface"><span class="secno">3.2. </span><span class="content">The <code>PortalHost</code> interface</span><a class="self-link" href="#the-portalhost-interface"></a></h3>
    <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="portal-host-object">portal host object</dfn> of a <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/window-object.html#window" id="ref-for-window">Window</a></code> is a <code class="idl"><a data-link-type="idl" href="#portalhost" id="ref-for-portalhost①">PortalHost</a></code>.</p>
    <div class="note" role="note"> The <a data-link-type="dfn" href="#portal-host-object" id="ref-for-portal-host-object①">portal host object</a> can be used to communicate with the <a data-link-type="dfn" href="#host-browsing-context" id="ref-for-host-browsing-context②">host browsing context</a>.
    Its operations throw if used while its context is not a <a data-link-type="dfn" href="#portal-browsing-context" id="ref-for-portal-browsing-context⑧">portal browsing context</a> (i.e. there is no host).
    It is not accessible via <code class="idl"><a data-link-type="idl" href="#dom-window-portalhost" id="ref-for-dom-window-portalhost">window.portalHost</a></code> at such times. </div>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="portalhost"><code><c- g>PortalHost</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#eventtarget" id="ref-for-eventtarget"><c- n>EventTarget</c-></a> {
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-portalhost-postmessage" id="ref-for-dom-portalhost-postmessage"><c- g>postMessage</c-></a>(<c- b>any</c-> <dfn class="idl-code" data-dfn-for="PortalHost/postMessage(message, targetOrigin, transfer), PortalHost/postMessage(message, targetOrigin)" data-dfn-type="argument" data-export id="dom-portalhost-postmessage-message-targetorigin-transfer-message"><code><c- g>message</c-></code><a class="self-link" href="#dom-portalhost-postmessage-message-targetorigin-transfer-message"></a></dfn>, <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString②"><c- b>DOMString</c-></a> <dfn class="idl-code" data-dfn-for="PortalHost/postMessage(message, targetOrigin, transfer), PortalHost/postMessage(message, targetOrigin)" data-dfn-type="argument" data-export id="dom-portalhost-postmessage-message-targetorigin-transfer-targetorigin"><code><c- g>targetOrigin</c-></code><a class="self-link" href="#dom-portalhost-postmessage-message-targetorigin-transfer-targetorigin"></a></dfn>, <c- b>optional</c-> <c- b>sequence</c->&lt;<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-object" id="ref-for-idl-object②"><c- b>object</c-></a>> <dfn class="idl-code" data-dfn-for="PortalHost/postMessage(message, targetOrigin, transfer), PortalHost/postMessage(message, targetOrigin)" data-dfn-type="argument" data-export id="dom-portalhost-postmessage-message-targetorigin-transfer-transfer"><code><c- g>transfer</c-></code><a class="self-link" href="#dom-portalhost-postmessage-message-targetorigin-transfer-transfer"></a></dfn> = []);
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-portalhost-postmessage-message-options" id="ref-for-dom-portalhost-postmessage-message-options"><c- g>postMessage</c-></a>(<c- b>any</c-> <dfn class="idl-code" data-dfn-for="PortalHost/postMessage(message, options), PortalHost/postMessage(message)" data-dfn-type="argument" data-export id="dom-portalhost-postmessage-message-options-message"><code><c- g>message</c-></code><a class="self-link" href="#dom-portalhost-postmessage-message-options-message"></a></dfn>, <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/window-object.html#windowpostmessageoptions" id="ref-for-windowpostmessageoptions④"><c- n>WindowPostMessageOptions</c-></a> <dfn class="idl-code" data-dfn-for="PortalHost/postMessage(message, options), PortalHost/postMessage(message)" data-dfn-type="argument" data-export id="dom-portalhost-postmessage-message-options-options"><code><c- g>options</c-></code><a class="self-link" href="#dom-portalhost-postmessage-message-options-options"></a></dfn>);

    <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler②"><c- n>EventHandler</c-></a> <dfn class="idl-code" data-dfn-for="PortalHost" data-dfn-type="attribute" data-export data-type="EventHandler" id="dom-portalhost-onmessage"><code><c- g>onmessage</c-></code><a class="self-link" href="#dom-portalhost-onmessage"></a></dfn>;
    <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler③"><c- n>EventHandler</c-></a> <dfn class="idl-code" data-dfn-for="PortalHost" data-dfn-type="attribute" data-export data-type="EventHandler" id="dom-portalhost-onmessageerror"><code><c- g>onmessageerror</c-></code><a class="self-link" href="#dom-portalhost-onmessageerror"></a></dfn>;
};
</pre>
    <section class="algorithm" data-algorithm="portalhost-postmessage">
      The <dfn class="dfn-paneled idl-code" data-dfn-for="PortalHost" data-dfn-type="method" data-export data-lt="postMessage(message, targetOrigin, transfer)|postMessage(message, targetOrigin)" id="dom-portalhost-postmessage"><code>postMessage(<var>message</var>, <var>targetOrigin</var>, <var>transfer</var>)</code></dfn> method <em>must</em> run these steps: 
     <ol>
      <li data-md>
       <p>Let <var>options</var> be « "<code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/window-object.html#windowpostmessageoptions" id="ref-for-windowpostmessageoptions⑤">targetOrigin</a></code>" → <var>targetOrigin</var>, "<code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/web-messaging.html#postmessageoptions" id="ref-for-postmessageoptions①">transfer</a></code>" → <var>transfer</var> ».</p>
      <li data-md>
       <p>Run the steps for <code class="idl"><a data-link-type="idl" href="#dom-portalhost-postmessage-message-options" id="ref-for-dom-portalhost-postmessage-message-options①">postMessage</a></code>(<var>message</var>, <var>options</var>).</p>
     </ol>
     <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="PortalHost" data-dfn-type="method" data-export data-lt="postMessage(message, options)|postMessage(message)" id="dom-portalhost-postmessage-message-options"><code>postMessage(<var>message</var>, <var>options</var>)</code></dfn> method <em>must</em> run these steps:</p>
     <ol>
      <li data-md>
       <p>Let <var>settings</var> be the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#relevant-settings-object" id="ref-for-relevant-settings-object①">relevant settings object</a> of <a data-link-type="dfn" href="https://heycam.github.io/webidl/#this" id="ref-for-this④">this</a>.</p>
      <li data-md>
       <p>Let <var>browsingContext</var> be the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#responsible-browsing-context" id="ref-for-responsible-browsing-context">responsible browsing context</a> of <var>settings</var>.</p>
      <li data-md>
       <p>If <var>browsingContext</var> has a <a data-link-type="dfn" href="#portal-state" id="ref-for-portal-state①①">portal state</a> other than "<code>portal</code>", throw an "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#invalidstateerror" id="ref-for-invalidstateerror④">InvalidStateError</a></code>" <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException⑤">DOMException</a></code>.</p>
       <p class="note" role="note"><span>Note:</span> This roughly means that it has not yet been activated, as far as this <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop" id="ref-for-event-loop⑤">event loop</a> has been told.
It is possible that this browsing context will be <a data-link-type="dfn" href="#activate-a-portal-browsing-context" id="ref-for-activate-a-portal-browsing-context③">activated</a> in parallel
to this message being sent; in such cases, messages may not be delivered.</p>
      <li data-md>
       <p>Let <var>origin</var> be the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/origin.html#ascii-serialisation-of-an-origin" id="ref-for-ascii-serialisation-of-an-origin①">serialization</a> of <var>settings</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-settings-object-origin" id="ref-for-concept-settings-object-origin①">origin</a>.</p>
      <li data-md>
       <p>Let <var>targetOrigin</var> be <var>options</var>["<code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/window-object.html#windowpostmessageoptions" id="ref-for-windowpostmessageoptions⑥">targetOrigin</a></code>"].</p>
      <li data-md>
       <p>If <var>targetOrigin</var> is a single U+002F SOLIDUS character (/), then set <var>targetOrigin</var> to the <span spec-section="#concept-settings-object-origin">origin</span> of <var>settings</var>.</p>
      <li data-md>
       <p>Otherwise, if <var>targetOrigin</var> is not a single U+002A ASTERISK character (*), then:</p>
       <ol>
        <li data-md>
         <p>Let <var>parsedURL</var> be the result of running the <a data-link-type="dfn" href="https://url.spec.whatwg.org/#concept-url-parser" id="ref-for-concept-url-parser①">URL parser</a> on <var>targetOrigin</var>.</p>
        <li data-md>
         <p>If <var>parsedURL</var> is failure, then throw a "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#syntaxerror" id="ref-for-syntaxerror①">SyntaxError</a></code>" <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException⑥">DOMException</a></code>.</p>
        <li data-md>
         <p>Set <var>targetOrigin</var> to <var>parsedURL</var>’s <a data-link-type="dfn" href="https://url.spec.whatwg.org/#concept-url-origin" id="ref-for-concept-url-origin①">origin</a>.</p>
       </ol>
      <li data-md>
       <p>Let <var>transfer</var> be <var>options</var>["<code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/window-object.html#windowpostmessageoptions" id="ref-for-windowpostmessageoptions⑦">transfer</a></code>"].</p>
      <li data-md>
       <p>Let <var>serializeWithTransferResult</var> be <a data-link-type="abstract-op" href="https://html.spec.whatwg.org/multipage/structured-data.html#structuredserializewithtransfer" id="ref-for-structuredserializewithtransfer②">StructuredSerializeWithTransfer</a>(<var>message</var>, <var>transfer</var>). Rethrow any exceptions.</p>
      <li data-md>
       <p>Let <var>hostElement</var> be the <a data-link-type="dfn" href="#host-element" id="ref-for-host-element⑥">host element</a> of <var>browsingContext</var>.</p>
      <li data-md>
       <p>Let <var>hostBrowsingContext</var> be the <a data-link-type="dfn" href="#host-browsing-context" id="ref-for-host-browsing-context③">host browsing context</a> of <var>browsingContext</var>.</p>
      <li data-md>
       <p><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task④">Queue a task</a> from the <a data-link-type="dfn" href="#portal-task-source" id="ref-for-portal-task-source④">portal task source</a> to the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop" id="ref-for-event-loop⑥">event loop</a> associated with <var>hostBrowsingContext</var> to run the following steps:</p>
       <ol>
        <li data-md>
         <p>If <var>browsingContext</var> is not the <a data-link-type="dfn" href="#htmlportalelement-guest-browsing-context" id="ref-for-htmlportalelement-guest-browsing-context①②">guest browsing context</a> of <var>hostElement</var>, then abort these steps.</p>
         <p class="note" role="note"><span>Note:</span> This might happen if this <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop" id="ref-for-event-loop⑦">event loop</a> had a queued task to deliver a message, but
it was not executed before the portal was <a data-link-type="dfn" href="#activate-a-portal-browsing-context" id="ref-for-activate-a-portal-browsing-context④">activated</a>.
In such cases, the message is not delivered.</p>
        <li data-md>
         <p>Let <var>targetSettings</var> be the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#relevant-settings-object" id="ref-for-relevant-settings-object②">relevant settings object</a> of <var>hostElement</var>.</p>
        <li data-md>
         <p>If <var>targetOrigin</var> is not a single literal U+002A ASTERISK character
(*) and <var>targetSettings</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-settings-object-origin" id="ref-for-concept-settings-object-origin②">origin</a> is not <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/origin.html#same-origin" id="ref-for-same-origin①">same origin</a> with <var>targetOrigin</var>, then abort these steps.</p>
        <li data-md>
         <p>Let <var>targetRealm</var> be <var>targetSettings</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#environment-settings-object&apos;s-realm" id="ref-for-environment-settings-object&apos;s-realm">realm</a>.</p>
        <li data-md>
         <p>Let <var>deserializeRecord</var> be <a data-link-type="abstract-op" href="https://html.spec.whatwg.org/multipage/structured-data.html#structureddeserializewithtransfer" id="ref-for-structureddeserializewithtransfer②">StructuredDeserializeWithTransfer</a>(<var>serializeWithTransferResult</var>, <var>targetRealm</var>).</p>
         <p>If this throws an exception, catch it, <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-fire" id="ref-for-concept-event-fire②">fire an event</a> named <code class="idl"><a class="idl-code" data-link-type="event" href="#eventdef-htmlportalelement-messageerror" id="ref-for-eventdef-htmlportalelement-messageerror">messageerror</a></code> at <var>element</var> using <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/comms.html#messageevent" id="ref-for-messageevent④">MessageEvent</a></code> with the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/comms.html#dom-messageevent-origin" id="ref-for-dom-messageevent-origin②">origin</a></code> attribute initialized to <var>origin</var> and the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/comms.html#dom-messageevent-source" id="ref-for-dom-messageevent-source②">source</a></code> attribute initialized to <var>element</var>.</p>
        <li data-md>
         <p>Let <var>messageClone</var> be <var>deserializeRecord</var>.[[Deserialized]].</p>
        <li data-md>
         <p>Let <var>newPorts</var> be a new <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-frozen-array-type" id="ref-for-dfn-frozen-array-type①">frozen array</a> consisting of all <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/web-messaging.html#messageport" id="ref-for-messageport①">MessagePort</a></code> objects in <var>deserializeRecord</var>.[[TransferredValues]], if any, maintaining their relative order.</p>
        <li data-md>
         <p><a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-fire" id="ref-for-concept-event-fire③">Fire an event</a> named <code class="idl"><a class="idl-code" data-link-type="event" href="#eventdef-htmlportalelement-message" id="ref-for-eventdef-htmlportalelement-message">message</a></code> at the <var>element</var> using <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/comms.html#messageevent" id="ref-for-messageevent⑤">MessageEvent</a></code>, with the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/comms.html#dom-messageevent-origin" id="ref-for-dom-messageevent-origin③">origin</a></code> attribute
initialized to <var>origin</var>, the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/comms.html#dom-messageevent-source" id="ref-for-dom-messageevent-source③">source</a></code> attribute initialized to <var>element</var>, the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/comms.html#dom-messageevent-data" id="ref-for-dom-messageevent-data①">data</a></code> attribute
initialized to <var>messageClone</var>, and the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/comms.html#dom-messageevent-ports" id="ref-for-dom-messageevent-ports①">ports</a></code> attribute initialized to <var>newPorts</var>.</p>
       </ol>
     </ol>
    </section>
    <ul class="wpt-tests-block">
     <li class="wpt-test"><a href="https://wpt.fyi/results/portals/portals-host-post-message.sub.html">portals-host-post-message.sub.html</a> <a href="http://web-platform-tests.live/portals/portals-host-post-message.sub.html" title="portals/portals-host-post-message.sub.html"><small>(live test)</small></a> <a href="https://github.com/web-platform-tests/wpt/blob/master/portals/portals-host-post-message.sub.html"><small>(source)</small></a>
    </ul>
    <p>The following events are dispatched on <code class="idl"><a data-link-type="idl" href="#portalhost" id="ref-for-portalhost②">PortalHost</a></code> objects:</p>
    <table class="data">
     <thead>
      <tr>
       <th>Event name
       <th>Interface
       <th>Dispatched when
     <tbody>
      <tr>
       <td><dfn class="dfn-paneled idl-code" data-dfn-for="PortalHost" data-dfn-type="event" data-export id="eventdef-portalhost-message"><code>message</code></dfn>
       <td><code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/comms.html#messageevent" id="ref-for-messageevent⑥">MessageEvent</a></code>
       <td>A message is received by the object, and deserialization does not throw an exception.
      <tr>
       <td><dfn class="dfn-paneled idl-code" data-dfn-for="PortalHost" data-dfn-type="event" data-export id="eventdef-portalhost-messageerror"><code>messageerror</code></dfn>
       <td><code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/comms.html#messageevent" id="ref-for-messageevent⑦">MessageEvent</a></code>
       <td>A message is received by the object, but deserialization throws an exception.
    </table>
    <h3 class="heading settled" data-level="3.3" id="the-portalactivateevent-interface"><span class="secno">3.3. </span><span class="content">The <code>PortalActivateEvent</code> interface</span><a class="self-link" href="#the-portalactivateevent-interface"></a></h3>
<pre class="idl highlight def">[<dfn class="idl-code" data-dfn-for="PortalActivateEvent" data-dfn-type="constructor" data-export data-lt="PortalActivateEvent(type, eventInitDict)|PortalActivateEvent(type)" id="dom-portalactivateevent-portalactivateevent"><code><c- g>Constructor</c-></code><a class="self-link" href="#dom-portalactivateevent-portalactivateevent"></a></dfn>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString③"><c- b>DOMString</c-></a> <dfn class="idl-code" data-dfn-for="PortalActivateEvent/PortalActivateEvent(type, eventInitDict)" data-dfn-type="argument" data-export id="dom-portalactivateevent-portalactivateevent-type-eventinitdict-type"><code><c- g>type</c-></code><a class="self-link" href="#dom-portalactivateevent-portalactivateevent-type-eventinitdict-type"></a></dfn>, <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-portalactivateeventinit" id="ref-for-dictdef-portalactivateeventinit"><c- n>PortalActivateEventInit</c-></a> <dfn class="idl-code" data-dfn-for="PortalActivateEvent/PortalActivateEvent(type, eventInitDict)" data-dfn-type="argument" data-export id="dom-portalactivateevent-portalactivateevent-type-eventinitdict-eventinitdict"><code><c- g>eventInitDict</c-></code><a class="self-link" href="#dom-portalactivateevent-portalactivateevent-type-eventinitdict-eventinitdict"></a></dfn>), <a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed②"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="portalactivateevent"><code><c- g>PortalActivateEvent</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#event" id="ref-for-event"><c- n>Event</c-></a> {
    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>any</c-> <dfn class="dfn-paneled idl-code" data-dfn-for="PortalActivateEvent" data-dfn-type="attribute" data-export data-readonly data-type="any" id="dom-portalactivateevent-data"><code><c- g>data</c-></code></dfn>;
    <a class="n" data-link-type="idl-name" href="#htmlportalelement" id="ref-for-htmlportalelement②"><c- n>HTMLPortalElement</c-></a> <a class="idl-code" data-link-type="method" href="#dom-portalactivateevent-adoptpredecessor" id="ref-for-dom-portalactivateevent-adoptpredecessor②"><c- g>adoptPredecessor</c-></a>();
};

<c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-portalactivateeventinit"><code><c- g>PortalActivateEventInit</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#dictdef-eventinit" id="ref-for-dictdef-eventinit"><c- n>EventInit</c-></a> {
    <c- b>any</c-> <dfn class="idl-code" data-default="null" data-dfn-for="PortalActivateEventInit" data-dfn-type="dict-member" data-export data-type="any " id="dom-portalactivateeventinit-data"><code><c- g>data</c-></code><a class="self-link" href="#dom-portalactivateeventinit-data"></a></dfn> = <c- b>null</c->;
};
</pre>
    <p>A <code class="idl"><a data-link-type="idl" href="#portalactivateevent" id="ref-for-portalactivateevent①">PortalActivateEvent</a></code> has an associated <dfn class="dfn-paneled" data-dfn-for="PortalActivateEvent" data-dfn-type="dfn" data-noexport id="portalactivateevent-predecessor-browsing-context">predecessor browsing context</dfn>,
  which is a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#top-level-browsing-context" id="ref-for-top-level-browsing-context③">top-level browsing context</a> or null, a <dfn class="dfn-paneled" data-dfn-for="PortalActivateEvent" data-dfn-type="dfn" data-noexport id="portalactivateevent-successor-window">successor window</dfn>, which is
  a <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/window-object.html#window" id="ref-for-window①">Window</a></code>, an <dfn class="dfn-paneled" data-dfn-for="PortalActivateEvent" data-dfn-type="dfn" data-noexport id="portalactivateevent-activation-promise">activation promise</dfn>, which is a <a data-link-type="dfn" href="http://tc39.github.io/ecma262/#sec-promise-objects" id="ref-for-sec-promise-objects①">promise</a>, and a <dfn class="dfn-paneled" data-dfn-for="PortalActivateEvent" data-dfn-type="dfn" data-noexport id="portalactivateevent-adopted-predecessor-element">adopted predecessor element</dfn>, which is a <code><a data-link-type="element" href="#elementdef-portal" id="ref-for-elementdef-portal②④">portal</a></code> element or null.</p>
    <section class="algorithm" data-algorithm="portalactivateevent-event-constructing-steps">
      The <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-constructor-ext" id="ref-for-concept-event-constructor-ext">event constructing steps</a> for <code class="idl"><a data-link-type="idl" href="#portalactivateevent" id="ref-for-portalactivateevent②">PortalActivateEvent</a></code>, given an <var>event</var>, are as follows: 
     <ol>
      <li data-md>
       <p>Set <var>event</var>’s <a data-link-type="dfn" href="#portalactivateevent-predecessor-browsing-context" id="ref-for-portalactivateevent-predecessor-browsing-context①">predecessor browsing context</a> to null.</p>
      <li data-md>
       <p>Set <var>event</var>’s <a data-link-type="dfn" href="#portalactivateevent-successor-window" id="ref-for-portalactivateevent-successor-window①">successor window</a> to null.</p>
      <li data-md>
       <p>Set <var>event</var>’s <a data-link-type="dfn" href="#portalactivateevent-adopted-predecessor-element" id="ref-for-portalactivateevent-adopted-predecessor-element①">adopted predecessor element</a> to null.</p>
     </ol>
    </section>
    <ul class="wpt-tests-block">
     <li class="wpt-test"><a href="https://wpt.fyi/results/portals/portal-activate-event-constructor.html">portal-activate-event-constructor.html</a> <a href="http://web-platform-tests.live/portals/portal-activate-event-constructor.html" title="portals/portal-activate-event-constructor.html"><small>(live test)</small></a> <a href="https://github.com/web-platform-tests/wpt/blob/master/portals/portal-activate-event-constructor.html"><small>(source)</small></a>
    </ul>
    <section class="algorithm" data-algorithm="portalactivateevent-adoptpredecessor">
      The <dfn class="dfn-paneled idl-code" data-dfn-for="PortalActivateEvent" data-dfn-type="method" data-export id="dom-portalactivateevent-adoptpredecessor"><code>adoptPredecessor()</code></dfn> method <em>must</em> run these steps: 
     <ol>
      <li data-md>
       <p>If <a data-link-type="dfn" href="https://heycam.github.io/webidl/#this" id="ref-for-this⑤">this</a>'s <a data-link-type="dfn" href="#portalactivateevent-adopted-predecessor-element" id="ref-for-portalactivateevent-adopted-predecessor-element②">adopted predecessor element</a> is not null, throw an "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#invalidstateerror" id="ref-for-invalidstateerror⑤">InvalidStateError</a></code>" <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException⑦">DOMException</a></code>.</p>
      <li data-md>
       <p>Let <var>predecessorBrowsingContext</var> be <a data-link-type="dfn" href="https://heycam.github.io/webidl/#this" id="ref-for-this⑥">this</a>'s <a data-link-type="dfn" href="#portalactivateevent-predecessor-browsing-context" id="ref-for-portalactivateevent-predecessor-browsing-context②">predecessor browsing context</a>.</p>
      <li data-md>
       <p>Let <var>successorWindow</var> be <a data-link-type="dfn" href="https://heycam.github.io/webidl/#this" id="ref-for-this⑦">this</a>'s <a data-link-type="dfn" href="#portalactivateevent-successor-window" id="ref-for-portalactivateevent-successor-window②">successor window</a>.</p>
      <li data-md>
       <p>Run the steps to <a data-link-type="dfn" href="#adopt-the-predecessor-browsing-context" id="ref-for-adopt-the-predecessor-browsing-context③">adopt the predecessor browsing context</a> <var>predecessorBrowsingContext</var> in <var>successorWindow</var>,
and let <var>adoptedPredecessorElement</var> be the result.</p>
      <li data-md>
       <p>Set <a data-link-type="dfn" href="https://heycam.github.io/webidl/#this" id="ref-for-this⑧">this</a>'s <a data-link-type="dfn" href="#portalactivateevent-adopted-predecessor-element" id="ref-for-portalactivateevent-adopted-predecessor-element③">adopted predecessor element</a> to <var>adoptedPredecessorElement</var>.</p>
      <li data-md>
       <p><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task⑤">Queue a task</a> from the <a data-link-type="dfn" href="#portal-task-source" id="ref-for-portal-task-source⑤">portal task source</a> to the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop" id="ref-for-event-loop⑧">event loop</a> associated with <var>predecessorBrowsingContext</var> to resolve <a data-link-type="dfn" href="https://heycam.github.io/webidl/#this" id="ref-for-this⑨">this</a>'s <a data-link-type="dfn" href="#portalactivateevent-activation-promise" id="ref-for-portalactivateevent-activation-promise②">activation promise</a> with undefined.</p>
       <p class="note" role="note"><span>Note:</span> Queuing this immediately makes it possible to send messages to the adopted
portal during dispatch of the <code class="idl"><a class="idl-code" data-link-type="event" href="#eventdef-window-portalactivate" id="ref-for-eventdef-window-portalactivate③">portalactivate</a></code> event without
ordering issues between the task to resolve the activation promise and the task
to deliver the message.</p>
      <li data-md>
       <p>Return <var>adoptedPredecessorElement</var>.</p>
     </ol>
     <ul class="wpt-tests-block">
      <li class="wpt-test"><a href="https://wpt.fyi/results/portals/portals-adopt-predecessor.html">portals-adopt-predecessor.html</a> <a href="http://web-platform-tests.live/portals/portals-adopt-predecessor.html" title="portals/portals-adopt-predecessor.html"><small>(live test)</small></a> <a href="https://github.com/web-platform-tests/wpt/blob/master/portals/portals-adopt-predecessor.html"><small>(source)</small></a>
     </ul>
    </section>
    <h3 class="heading settled" data-level="3.4" id="miscellaneous-extensions"><span class="secno">3.4. </span><span class="content">Miscellaneous extensions</span><a class="self-link" href="#miscellaneous-extensions"></a></h3>
    <p>The <code class="idl"><a data-link-type="idl" href="#typedefdef-messageeventsource" id="ref-for-typedefdef-messageeventsource">MessageEventSource</a></code> union is extended to include the new interfaces
  which can produce <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/comms.html#messageevent" id="ref-for-messageevent⑧">MessageEvent</a></code> events.</p>
<pre class="idl highlight def"><c- b>typedef</c-> (<a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/window-object.html#windowproxy" id="ref-for-windowproxy②"><c- n>WindowProxy</c-></a> <c- b>or</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/web-messaging.html#messageport" id="ref-for-messageport②"><c- n>MessagePort</c-></a> <c- b>or</c-> <a class="n" data-link-type="idl-name" href="https://w3c.github.io/ServiceWorker/#serviceworker" id="ref-for-serviceworker"><c- n>ServiceWorker</c-></a> <c- b>or</c-> <a class="n" data-link-type="idl-name" href="#htmlportalelement" id="ref-for-htmlportalelement③"><c- n>HTMLPortalElement</c-></a> <c- b>or</c-> <a class="n" data-link-type="idl-name" href="#portalhost" id="ref-for-portalhost③"><c- n>PortalHost</c-></a>) <dfn class="dfn-paneled idl-code" data-dfn-type="typedef" data-export id="typedefdef-messageeventsource"><code><c- g>MessageEventSource</c-></code></dfn>;
</pre>
    <p>A <code class="idl"><a data-link-type="idl" href="#portalhost" id="ref-for-portalhost④">PortalHost</a></code> is exposed at times when the window may be in a <a data-link-type="dfn" href="#portal-browsing-context" id="ref-for-portal-browsing-context⑨">portal browsing context</a>.</p>
<pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/multipage/window-object.html#window" id="ref-for-window②"><c- g>Window</c-></a> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#portalhost" id="ref-for-portalhost⑤"><c- n>PortalHost</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="PortalHost?" href="#dom-window-portalhost" id="ref-for-dom-window-portalhost①"><c- g>portalHost</c-></a>;
};

<c- b>partial</c-> <c- b>interface</c-> <c- b>mixin</c-> <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/multipage/webappapis.html#windoweventhandlers" id="ref-for-windoweventhandlers"><c- g>WindowEventHandlers</c-></a> {
    <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler④"><c- n>EventHandler</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="WindowEventHandlers" data-dfn-type="attribute" data-export data-type="EventHandler" id="dom-windoweventhandlers-onportalactivate"><code><c- g>onportalactivate</c-></code></dfn>;
};
</pre>
    <section class="algorithm" data-algorithm="window-portalhost">
      The <dfn class="dfn-paneled idl-code" data-dfn-for="Window" data-dfn-type="attribute" data-export id="dom-window-portalhost"><code>portalHost</code></dfn> attribute’s getter <em>must</em> run the following steps: 
     <ol>
      <li data-md>
       <p>Let <var>context</var> be <a data-link-type="dfn" href="https://heycam.github.io/webidl/#this" id="ref-for-this①⓪">this</a>'s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/window-object.html#window-bc" id="ref-for-window-bc">browsing context</a>.</p>
      <li data-md>
       <p>If <var>context</var> is null or the <a data-link-type="dfn" href="#portal-state" id="ref-for-portal-state①②">portal state</a> of <var>context</var> is not "<code>portal</code>", then return null.</p>
      <li data-md>
       <p>Return <a data-link-type="dfn" href="https://heycam.github.io/webidl/#this" id="ref-for-this①①">this</a>'s <a data-link-type="dfn" href="#portal-host-object" id="ref-for-portal-host-object②">portal host object</a>.</p>
     </ol>
    </section>
    <ul class="wpt-tests-block">
     <li class="wpt-test"><a href="https://wpt.fyi/results/portals/portals-host-exposure.sub.html">portals-host-exposure.sub.html</a> <a href="http://web-platform-tests.live/portals/portals-host-exposure.sub.html" title="portals/portals-host-exposure.sub.html"><small>(live test)</small></a> <a href="https://github.com/web-platform-tests/wpt/blob/master/portals/portals-host-exposure.sub.html"><small>(source)</small></a>
     <li class="wpt-test"><a href="https://wpt.fyi/results/portals/portals-host-null.html">portals-host-null.html</a> <a href="http://web-platform-tests.live/portals/portals-host-null.html" title="portals/portals-host-null.html"><small>(live test)</small></a> <a href="https://github.com/web-platform-tests/wpt/blob/master/portals/portals-host-null.html"><small>(source)</small></a>
    </ul>
    <p>The following events are dispatched on <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/window-object.html#window" id="ref-for-window③">Window</a></code> objects:</p>
    <table class="data">
     <thead>
      <tr>
       <th>Event name
       <th>Interface
       <th>Dispatched when
     <tbody>
      <tr>
       <td><dfn class="dfn-paneled idl-code" data-dfn-for="Window" data-dfn-type="event" data-export id="eventdef-window-portalactivate"><code>portalactivate</code></dfn>
       <td><code class="idl"><a data-link-type="idl" href="#portalactivateevent" id="ref-for-portalactivateevent③">PortalActivateEvent</a></code>
       <td>The window is associated with a new <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#top-level-browsing-context" id="ref-for-top-level-browsing-context④">top-level browsing context</a> due to activation of its <a data-link-type="dfn" href="#portal-browsing-context" id="ref-for-portal-browsing-context①⓪">portal browsing context</a>.
    </table>
    <p>Like other <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-idl-attributes" id="ref-for-event-handler-idl-attributes">event handler IDL attributes</a> in the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/webappapis.html#windoweventhandlers" id="ref-for-windoweventhandlers①">WindowEventHandlers</a></code> interface mixin, <code class="idl"><a data-link-type="idl" href="#dom-windoweventhandlers-onportalactivate" id="ref-for-dom-windoweventhandlers-onportalactivate">onportalactivate</a></code> is exposed on all <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/sections.html#the-body-element" id="ref-for-the-body-element">body</a></code> and <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/obsolete.html#frameset" id="ref-for-frameset">frameset</a></code> elements
  as a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-content-attributes" id="ref-for-event-handler-content-attributes①">event handler content attribute</a>.</p>
   </section>
   <section>
    <h2 class="heading settled" data-level="4" id="security-considerations"><span class="secno">4. </span><span class="content">Security Considerations</span><a class="self-link" href="#security-considerations"></a></h2>
    <div class="issue" id="issue-6b2c0ac1"><a class="self-link" href="#issue-6b2c0ac1"></a> We should expand this section further. </div>
    <h3 class="heading settled" data-level="4.1" id="security-overview"><span class="secno">4.1. </span><span class="content">Overview</span><a class="self-link" href="#security-overview"></a></h3>
    <p><em>This section is non-normative.</em></p>
    <p>In general, a <a data-link-type="dfn" href="#portal-browsing-context" id="ref-for-portal-browsing-context①①">portal browsing context</a> should respect policies that would apply to
  a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#nested-browsing-context" id="ref-for-nested-browsing-context④">nested browsing context</a>, e.g. that would restrict whether a document can be embedded
  in a document from another <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/origin.html#concept-origin" id="ref-for-concept-origin①">origin</a>.</p>
    <h3 class="heading settled" data-level="4.2" id="csp"><span class="secno">4.2. </span><span class="content">Integration with Content Security Policy</span><a class="self-link" href="#csp"></a></h3>
    <p>This specification integrates with <a data-link-type="biblio" href="#biblio-csp">[CSP]</a> as follows.</p>
    <section class="algorithm" data-algorithm="csp-effective-directive-for-a-request">
      The algorithm for determining the <a href="https://www.w3.org/TR/CSP3/#effective-directive-for-a-request">effective directive for a request</a> is modified by prepending the following: 
     <ol>
      <li data-md>
       <p>If <var>request</var>’s <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-request-initiator" id="ref-for-concept-request-initiator">initiator</a> is "", its <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-request-destination" id="ref-for-concept-request-destination">destination</a> is "<code>document</code>", and
its <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-environment-target-browsing-context" id="ref-for-concept-environment-target-browsing-context">target browsing context</a> is a <a data-link-type="dfn" href="#portal-browsing-context" id="ref-for-portal-browsing-context①②">portal browsing context</a>, return <code>frame-src</code>.</p>
     </ol>
    </section>
    <section class="algorithm" data-algorithm="csp-frame-ancestors-navigation-response">
      The <a href="https://www.w3.org/TR/CSP3/#frame-ancestors-navigation-response">frame-ancestors Navigation Response Check</a> is modified as follows: 
     <ol>
      <li data-md>
       <p>Replace all references to "<a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#nested-browsing-context" id="ref-for-nested-browsing-context⑤">nested browsing context</a>" with "<a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#nested-browsing-context" id="ref-for-nested-browsing-context⑥">nested browsing context</a> or <a data-link-type="dfn" href="#portal-browsing-context" id="ref-for-portal-browsing-context①③">portal browsing context</a>".</p>
      <li data-md>
       <p>Replace all references to "<a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#parent-browsing-context" id="ref-for-parent-browsing-context">parent browsing context</a>" with "<a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#parent-browsing-context" id="ref-for-parent-browsing-context①">parent browsing context</a> or <a data-link-type="dfn" href="#host-browsing-context" id="ref-for-host-browsing-context④">host browsing context</a>".</p>
     </ol>
    </section>
    <div class="issue" id="issue-0bcb49e2"><a class="self-link" href="#issue-0bcb49e2"></a> <code class="idl"><a data-link-type="idl" href="#dom-htmlportalelement-activate" id="ref-for-dom-htmlportalelement-activate③">activate(options)</a></code> should also respect the CSP <a data-link-type="dfn" href="https://w3c.github.io/webappsec-csp/#navigate-to" id="ref-for-navigate-to">navigate-to</a> directive. </div>
    <h3 class="heading settled" data-level="4.3" id="rfc7034"><span class="secno">4.3. </span><span class="content">Integration with RFC 7034</span><a class="self-link" href="#rfc7034"></a></h3>
    <p>This specification integrates with <a data-link-type="biblio" href="#biblio-rfc7034">[RFC7034]</a>, which defines the <code>X-Frame-Options</code> HTTP header, as follows.</p>
    <p>If a browser receives content with this header field in response to a navigation request whose <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-environment-target-browsing-context" id="ref-for-concept-environment-target-browsing-context①">target browsing context</a> is a <a data-link-type="dfn" href="#portal-browsing-context" id="ref-for-portal-browsing-context①④">portal browsing context</a>, then the browser must apply the rules
  in <a data-link-type="biblio" href="#biblio-rfc7034">[RFC7034]</a> as though it were to be displayed in a frame in the <a data-link-type="dfn" href="#host-browsing-context" id="ref-for-host-browsing-context⑤">host browsing context</a> instead
  and as though the origin of the top-level browsing context <var>topLevelBrowsingContext</var> were the origin of
  the result of the following algorithm:</p>
    <ol>
     <li data-md>
      <p>While <var>topLevelBrowsingContext</var> is a <a data-link-type="dfn" href="#portal-browsing-context" id="ref-for-portal-browsing-context①⑤">portal browsing context</a>:</p>
      <ol>
       <li data-md>
        <p>Set <var>topLevelBrowsingContext</var> to its <a data-link-type="dfn" href="#host-browsing-context" id="ref-for-host-browsing-context⑥">host browsing context</a>.</p>
      </ol>
     <li data-md>
      <p>Return <var>topLevelBrowsingContext</var>.</p>
    </ol>
    <h3 class="heading settled" data-level="4.4" id="fetch-metadata"><span class="secno">4.4. </span><span class="content">Integration with Fetch Metadata Request Headers</span><a class="self-link" href="#fetch-metadata"></a></h3>
    <p>This specification integrates with <span>[FETCH-METADATA]</span> as follows.</p>
    <div class="note" role="note">
      The effect of this is that the request for a document in a <a data-link-type="dfn" href="#portal-browsing-context" id="ref-for-portal-browsing-context①⑥">portal browsing context</a> will contain the following HTTP header, as though it were in a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#nested-browsing-context" id="ref-for-nested-browsing-context⑦">nested browsing context</a>. 
<pre>    Sec-Fetch-Mode: nested-navigate
</pre>
     <p>Even though no spec patches are required to do so, implementations must also send
    the appropriate fetch metadata headers as it would if the load were occurring in
    an <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-iframe-element" id="ref-for-the-iframe-element②">iframe</a></code> element.</p>
    </div>
    <section class="algorithm" data-algorithm="fetch-metadata-set-mode">
      The algorithm to <span spec-section="#abstract-opdef-set-mode">set the Sec-Fetch-Mode header</span> for a request <var>r</var> is modified as follows: 
     <ol>
      <li data-md>
       <p>Where the algorithm checks whether <var>r</var>’s <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-request-reserved-client" id="ref-for-concept-request-reserved-client">reserved client</a>'s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-environment-target-browsing-context" id="ref-for-concept-environment-target-browsing-context②">target browsing context</a> is
a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#nested-browsing-context" id="ref-for-nested-browsing-context⑧">nested browsing context</a>, check instead whether it is a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#nested-browsing-context" id="ref-for-nested-browsing-context⑨">nested browsing context</a> or
a <a data-link-type="dfn" href="#portal-browsing-context" id="ref-for-portal-browsing-context①⑦">portal browsing context</a>.</p>
     </ol>
    </section>
   </section>
  </main>
  <div data-fill-with="conformance">
   <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
   <p> Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology.
            The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL”
            in the normative parts of this document
            are to be interpreted as described in RFC 2119.
            However, for readability,
            these words do not appear in all uppercase letters in this specification. </p>
   <p> All of the text of this specification is normative
            except sections explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a> </p>
   <p> Examples in this specification are introduced with the words “for example”
            or are set apart from the normative text with <code>class="example"</code>, like this: </p>
   <div class="example" id="example-example"><a class="self-link" href="#example-example"></a> This is an example of an informative example. </div>
   <p> Informative notes begin with the word “Note”
            and are set apart from the normative text with <code>class="note"</code>, like this: </p>
   <p class="note" role="note"> Note, this is an informative note. </p>
  </div>
<script>
(function() {
  "use strict";
  var collapseSidebarText = '<span aria-hidden="true">←</span> '
                          + '<span>Collapse Sidebar</span>';
  var expandSidebarText   = '<span aria-hidden="true">→</span> '
                          + '<span>Pop Out Sidebar</span>';
  var tocJumpText         = '<span aria-hidden="true">↑</span> '
                          + '<span>Jump to Table of Contents</span>';

  var sidebarMedia = window.matchMedia('screen and (min-width: 78em)');
  var autoToggle   = function(e){ toggleSidebar(e.matches) };
  if(sidebarMedia.addListener) {
    sidebarMedia.addListener(autoToggle);
  }

  function toggleSidebar(on) {
    if (on == undefined) {
      on = !document.body.classList.contains('toc-sidebar');
    }

    /* Don’t scroll to compensate for the ToC if we’re above it already. */
    var headY = 0;
    var head = document.querySelector('.head');
    if (head) {
      // terrible approx of "top of ToC"
      headY += head.offsetTop + head.offsetHeight;
    }
    var skipScroll = window.scrollY < headY;

    var toggle = document.getElementById('toc-toggle');
    var tocNav = document.getElementById('toc');
    if (on) {
      var tocHeight = tocNav.offsetHeight;
      document.body.classList.add('toc-sidebar');
      document.body.classList.remove('toc-inline');
      toggle.innerHTML = collapseSidebarText;
      if (!skipScroll) {
        window.scrollBy(0, 0 - tocHeight);
      }
      tocNav.focus();
      sidebarMedia.addListener(autoToggle); // auto-collapse when out of room
    }
    else {
      document.body.classList.add('toc-inline');
      document.body.classList.remove('toc-sidebar');
      toggle.innerHTML = expandSidebarText;
      if (!skipScroll) {
        window.scrollBy(0, tocNav.offsetHeight);
      }
      if (toggle.matches(':hover')) {
        /* Unfocus button when not using keyboard navigation,
           because I don’t know where else to send the focus. */
        toggle.blur();
      }
    }
  }

  function createSidebarToggle() {
    /* Create the sidebar toggle in JS; it shouldn’t exist when JS is off. */
    var toggle = document.createElement('a');
      /* This should probably be a button, but appearance isn’t standards-track.*/
    toggle.id = 'toc-toggle';
    toggle.class = 'toc-toggle';
    toggle.href = '#toc';
    toggle.innerHTML = collapseSidebarText;

    sidebarMedia.addListener(autoToggle);
    var toggler = function(e) {
      e.preventDefault();
      sidebarMedia.removeListener(autoToggle); // persist explicit off states
      toggleSidebar();
      return false;
    }
    toggle.addEventListener('click', toggler, false);


    /* Get <nav id=toc-nav>, or make it if we don’t have one. */
    var tocNav = document.getElementById('toc-nav');
    if (!tocNav) {
      tocNav = document.createElement('p');
      tocNav.id = 'toc-nav';
      /* Prepend for better keyboard navigation */
      document.body.insertBefore(tocNav, document.body.firstChild);
    }
    /* While we’re at it, make sure we have a Jump to Toc link. */
    var tocJump = document.getElementById('toc-jump');
    if (!tocJump) {
      tocJump = document.createElement('a');
      tocJump.id = 'toc-jump';
      tocJump.href = '#toc';
      tocJump.innerHTML = tocJumpText;
      tocNav.appendChild(tocJump);
    }

    tocNav.appendChild(toggle);
  }

  var toc = document.getElementById('toc');
  if (toc) {
    createSidebarToggle();
    toggleSidebar(sidebarMedia.matches);

    /* If the sidebar has been manually opened and is currently overlaying the text
       (window too small for the MQ to add the margin to body),
       then auto-close the sidebar once you click on something in there. */
    toc.addEventListener('click', function(e) {
      if(e.target.tagName.toLowerCase() == "a" && document.body.classList.contains('toc-sidebar') && !sidebarMedia.matches) {
        toggleSidebar(false);
      }
    }, false);
  }
  else {
    console.warn("Can’t find Table of Contents. Please use <nav id='toc'> around the ToC.");
  }

  /* Wrap tables in case they overflow */
  var tables = document.querySelectorAll(':not(.overlarge) > table.data, :not(.overlarge) > table.index');
  var numTables = tables.length;
  for (var i = 0; i < numTables; i++) {
    var table = tables[i];
    var wrapper = document.createElement('div');
    wrapper.className = 'overlarge';
    table.parentNode.insertBefore(wrapper, table);
    wrapper.appendChild(table);
  }

})();
</script>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#dom-htmlportalelement-activate">activate()</a><span>, in §3.1</span>
   <li><a href="#activate-a-portal-browsing-context">activate a portal browsing context</a><span>, in §2</span>
   <li><a href="#dom-htmlportalelement-activate">activate(options)</a><span>, in §3.1</span>
   <li><a href="#portalactivateevent-activation-promise">activation promise</a><span>, in §3.3</span>
   <li><a href="#portalactivateevent-adopted-predecessor-element">adopted predecessor element</a><span>, in §3.3</span>
   <li><a href="#dom-portalactivateevent-adoptpredecessor">adoptPredecessor()</a><span>, in §3.3</span>
   <li><a href="#adopt-the-predecessor-browsing-context">adopt the predecessor browsing context</a><span>, in §2</span>
   <li><a href="#htmlportalelement-close-a-portal-element">close a portal element</a><span>, in §3.1</span>
   <li>
    data
    <ul>
     <li><a href="#dom-portalactivateevent-data">attribute for PortalActivateEvent</a><span>, in §3.3</span>
     <li><a href="#dom-portalactivateeventinit-data">dict-member for PortalActivateEventInit</a><span>, in §3.3</span>
     <li><a href="#dom-portalactivateoptions-data">dict-member for PortalActivateOptions</a><span>, in §3.1</span>
    </ul>
   <li><a href="#htmlportalelement-guest-browsing-context">guest browsing context</a><span>, in §3.1</span>
   <li><a href="#host-browsing-context">host browsing context</a><span>, in §2</span>
   <li><a href="#host-element">host element</a><span>, in §2</span>
   <li><a href="#htmlportalelement">HTMLPortalElement</a><span>, in §3.1</span>
   <li><a href="#htmlportalelement-just-adopted-flag">just-adopted flag</a><span>, in §3.1</span>
   <li><a href="#htmlportalelement-may-have-a-guest-browsing-context">may have a guest browsing context</a><span>, in §3.1</span>
   <li>
    message
    <ul>
     <li><a href="#eventdef-htmlportalelement-message">event for HTMLPortalElement</a><span>, in §3.1</span>
     <li><a href="#eventdef-portalhost-message">event for PortalHost</a><span>, in §3.2</span>
    </ul>
   <li>
    messageerror
    <ul>
     <li><a href="#eventdef-htmlportalelement-messageerror">event for HTMLPortalElement</a><span>, in §3.1</span>
     <li><a href="#eventdef-portalhost-messageerror">event for PortalHost</a><span>, in §3.2</span>
    </ul>
   <li><a href="#typedefdef-messageeventsource">MessageEventSource</a><span>, in §3.4</span>
   <li>
    onmessage
    <ul>
     <li><a href="#dom-htmlportalelement-onmessage">attribute for HTMLPortalElement</a><span>, in §3.1</span>
     <li><a href="#dom-portalhost-onmessage">attribute for PortalHost</a><span>, in §3.2</span>
    </ul>
   <li>
    onmessageerror
    <ul>
     <li><a href="#dom-htmlportalelement-onmessageerror">attribute for HTMLPortalElement</a><span>, in §3.1</span>
     <li><a href="#dom-portalhost-onmessageerror">attribute for PortalHost</a><span>, in §3.2</span>
    </ul>
   <li><a href="#dom-windoweventhandlers-onportalactivate">onportalactivate</a><span>, in §3.4</span>
   <li><a href="#elementdef-portal">portal</a><span>, in §3.1</span>
   <li><a href="#eventdef-window-portalactivate">portalactivate</a><span>, in §3.4</span>
   <li><a href="#portalactivateevent">PortalActivateEvent</a><span>, in §3.3</span>
   <li><a href="#dictdef-portalactivateeventinit">PortalActivateEventInit</a><span>, in §3.3</span>
   <li><a href="#dom-portalactivateevent-portalactivateevent">PortalActivateEvent(type)</a><span>, in §3.3</span>
   <li><a href="#dom-portalactivateevent-portalactivateevent">PortalActivateEvent(type, eventInitDict)</a><span>, in §3.3</span>
   <li><a href="#dictdef-portalactivateoptions">PortalActivateOptions</a><span>, in §3.1</span>
   <li><a href="#portal-browsing-context">portal browsing context</a><span>, in §2</span>
   <li><a href="#dom-window-portalhost">portalHost</a><span>, in §3.4</span>
   <li><a href="#portalhost">PortalHost</a><span>, in §3.2</span>
   <li><a href="#portal-host-object">portal host object</a><span>, in §3.2</span>
   <li><a href="#portal-state">portal state</a><span>, in §2</span>
   <li><a href="#portal-task-source">portal task source</a><span>, in §2</span>
   <li>
    postMessage(message)
    <ul>
     <li><a href="#dom-htmlportalelement-postmessage-message-options">method for HTMLPortalElement</a><span>, in §3.1</span>
     <li><a href="#dom-portalhost-postmessage-message-options">method for PortalHost</a><span>, in §3.2</span>
    </ul>
   <li>
    postMessage(message, options)
    <ul>
     <li><a href="#dom-htmlportalelement-postmessage-message-options">method for HTMLPortalElement</a><span>, in §3.1</span>
     <li><a href="#dom-portalhost-postmessage-message-options">method for PortalHost</a><span>, in §3.2</span>
    </ul>
   <li>
    postMessage(message, targetOrigin)
    <ul>
     <li><a href="#dom-htmlportalelement-postmessage">method for HTMLPortalElement</a><span>, in §3.1</span>
     <li><a href="#dom-portalhost-postmessage">method for PortalHost</a><span>, in §3.2</span>
    </ul>
   <li>
    postMessage(message, targetOrigin, transfer)
    <ul>
     <li><a href="#dom-htmlportalelement-postmessage">method for HTMLPortalElement</a><span>, in §3.1</span>
     <li><a href="#dom-portalhost-postmessage">method for PortalHost</a><span>, in §3.2</span>
    </ul>
   <li><a href="#portalactivateevent-predecessor-browsing-context">predecessor browsing context</a><span>, in §3.3</span>
   <li><a href="#dom-htmlportalelement-referrerpolicy">referrerPolicy</a><span>, in §3.1</span>
   <li><a href="#element-attrdef-portal-referrerpolicy">referrerpolicy</a><span>, in §3.1</span>
   <li><a href="#htmlportalelement-set-the-source-url-of-a-portal-element">set the source URL of a portal element</a><span>, in §3.1</span>
   <li>
    src
    <ul>
     <li><a href="#dom-htmlportalelement-src">attribute for HTMLPortalElement</a><span>, in §3.1</span>
     <li><a href="#element-attrdef-portal-src">element-attr for portal</a><span>, in §3.1</span>
    </ul>
   <li><a href="#portalactivateevent-successor-window">successor window</a><span>, in §3.3</span>
   <li><a href="#dom-portalactivateoptions-transfer">transfer</a><span>, in §3.1</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-navigate-to">
   <a href="https://w3c.github.io/webappsec-csp/#navigate-to">https://w3c.github.io/webappsec-csp/#navigate-to</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-navigate-to">4.2. Integration with Content Security Policy</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-event">
   <a href="https://dom.spec.whatwg.org/#event">https://dom.spec.whatwg.org/#event</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event">3.3. The PortalActivateEvent interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dictdef-eventinit">
   <a href="https://dom.spec.whatwg.org/#dictdef-eventinit">https://dom.spec.whatwg.org/#dictdef-eventinit</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-eventinit">3.3. The PortalActivateEvent interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-eventtarget">
   <a href="https://dom.spec.whatwg.org/#eventtarget">https://dom.spec.whatwg.org/#eventtarget</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-eventtarget">3.2. The PortalHost interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-node-adopt-ext">
   <a href="https://dom.spec.whatwg.org/#concept-node-adopt-ext">https://dom.spec.whatwg.org/#concept-node-adopt-ext</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-node-adopt-ext">3.1. The portal element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-create-element">
   <a href="https://dom.spec.whatwg.org/#concept-create-element">https://dom.spec.whatwg.org/#concept-create-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-create-element">2. Concepts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-event-create">
   <a href="https://dom.spec.whatwg.org/#concept-event-create">https://dom.spec.whatwg.org/#concept-event-create</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-event-create">2. Concepts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-event-dispatch">
   <a href="https://dom.spec.whatwg.org/#concept-event-dispatch">https://dom.spec.whatwg.org/#concept-event-dispatch</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-event-dispatch">2. Concepts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-event-constructor-ext">
   <a href="https://dom.spec.whatwg.org/#concept-event-constructor-ext">https://dom.spec.whatwg.org/#concept-event-constructor-ext</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-event-constructor-ext">3.3. The PortalActivateEvent interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-event-fire">
   <a href="https://dom.spec.whatwg.org/#concept-event-fire">https://dom.spec.whatwg.org/#concept-event-fire</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-event-fire">3.1. The portal element</a> <a href="#ref-for-concept-event-fire①">(2)</a>
    <li><a href="#ref-for-concept-event-fire②">3.2. The PortalHost interface</a> <a href="#ref-for-concept-event-fire③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-node-document">
   <a href="https://dom.spec.whatwg.org/#concept-node-document">https://dom.spec.whatwg.org/#concept-node-document</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-node-document">2. Concepts</a>
    <li><a href="#ref-for-concept-node-document①">3.1. The portal element</a> <a href="#ref-for-concept-node-document②">(2)</a> <a href="#ref-for-concept-node-document③">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-reflect">
   <a href="https://dom.spec.whatwg.org/#concept-reflect">https://dom.spec.whatwg.org/#concept-reflect</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-reflect">3.1. The portal element</a> <a href="#ref-for-concept-reflect①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-event-type">
   <a href="https://dom.spec.whatwg.org/#dom-event-type">https://dom.spec.whatwg.org/#dom-event-type</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-event-type">2. Concepts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-sec-agents">
   <a href="http://tc39.github.io/ecma262/#sec-agents">http://tc39.github.io/ecma262/#sec-agents</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sec-agents">3.1. The portal element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-sec-promise-objects">
   <a href="http://tc39.github.io/ecma262/#sec-promise-objects">http://tc39.github.io/ecma262/#sec-promise-objects</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sec-promise-objects">3.1. The portal element</a>
    <li><a href="#ref-for-sec-promise-objects①">3.3. The PortalActivateEvent interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-request-destination">
   <a href="https://fetch.spec.whatwg.org/#concept-request-destination">https://fetch.spec.whatwg.org/#concept-request-destination</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-request-destination">4.2. Integration with Content Security Policy</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-http-scheme">
   <a href="https://fetch.spec.whatwg.org/#http-scheme">https://fetch.spec.whatwg.org/#http-scheme</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-http-scheme">3.1. The portal element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-request-initiator">
   <a href="https://fetch.spec.whatwg.org/#concept-request-initiator">https://fetch.spec.whatwg.org/#concept-request-initiator</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-request-initiator">4.2. Integration with Content Security Policy</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-request">
   <a href="https://fetch.spec.whatwg.org/#concept-request">https://fetch.spec.whatwg.org/#concept-request</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-request">3.1. The portal element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-request-referrer-policy">
   <a href="https://fetch.spec.whatwg.org/#concept-request-referrer-policy">https://fetch.spec.whatwg.org/#concept-request-referrer-policy</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-request-referrer-policy">3.1. The portal element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-request-url">
   <a href="https://fetch.spec.whatwg.org/#concept-request-url">https://fetch.spec.whatwg.org/#concept-request-url</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-request-url">3.1. The portal element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-request-reserved-client">
   <a href="https://fetch.spec.whatwg.org/#concept-request-reserved-client">https://fetch.spec.whatwg.org/#concept-request-reserved-client</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-request-reserved-client">4.4. Integration with Fetch Metadata Request Headers</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-cereactions">
   <a href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions">https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-cereactions">3.1. The portal element</a> <a href="#ref-for-cereactions①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-eventhandler">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler">https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-eventhandler">3.1. The portal element</a> <a href="#ref-for-eventhandler①">(2)</a>
    <li><a href="#ref-for-eventhandler②">3.2. The PortalHost interface</a> <a href="#ref-for-eventhandler③">(2)</a>
    <li><a href="#ref-for-eventhandler④">3.4. Miscellaneous extensions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-htmlconstructor">
   <a href="https://html.spec.whatwg.org/multipage/dom.html#htmlconstructor">https://html.spec.whatwg.org/multipage/dom.html#htmlconstructor</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-htmlconstructor">3.1. The portal element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-htmlelement">
   <a href="https://html.spec.whatwg.org/multipage/dom.html#htmlelement">https://html.spec.whatwg.org/multipage/dom.html#htmlelement</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-htmlelement">3.1. The portal element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-messageevent">
   <a href="https://html.spec.whatwg.org/multipage/comms.html#messageevent">https://html.spec.whatwg.org/multipage/comms.html#messageevent</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-messageevent">3.1. The portal element</a> <a href="#ref-for-messageevent①">(2)</a> <a href="#ref-for-messageevent②">(3)</a> <a href="#ref-for-messageevent③">(4)</a>
    <li><a href="#ref-for-messageevent④">3.2. The PortalHost interface</a> <a href="#ref-for-messageevent⑤">(2)</a> <a href="#ref-for-messageevent⑥">(3)</a> <a href="#ref-for-messageevent⑦">(4)</a>
    <li><a href="#ref-for-messageevent⑧">3.4. Miscellaneous extensions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-messageport">
   <a href="https://html.spec.whatwg.org/multipage/web-messaging.html#messageport">https://html.spec.whatwg.org/multipage/web-messaging.html#messageport</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-messageport">3.1. The portal element</a>
    <li><a href="#ref-for-messageport①">3.2. The PortalHost interface</a>
    <li><a href="#ref-for-messageport②">3.4. Miscellaneous extensions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-postmessageoptions">
   <a href="https://html.spec.whatwg.org/multipage/web-messaging.html#postmessageoptions">https://html.spec.whatwg.org/multipage/web-messaging.html#postmessageoptions</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-postmessageoptions">3.1. The portal element</a>
    <li><a href="#ref-for-postmessageoptions①">3.2. The PortalHost interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-structureddeserializewithtransfer">
   <a href="https://html.spec.whatwg.org/multipage/structured-data.html#structureddeserializewithtransfer">https://html.spec.whatwg.org/multipage/structured-data.html#structureddeserializewithtransfer</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-structureddeserializewithtransfer">2. Concepts</a>
    <li><a href="#ref-for-structureddeserializewithtransfer①">3.1. The portal element</a>
    <li><a href="#ref-for-structureddeserializewithtransfer②">3.2. The PortalHost interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-structuredserializewithtransfer">
   <a href="https://html.spec.whatwg.org/multipage/structured-data.html#structuredserializewithtransfer">https://html.spec.whatwg.org/multipage/structured-data.html#structuredserializewithtransfer</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-structuredserializewithtransfer">3.1. The portal element</a> <a href="#ref-for-structuredserializewithtransfer①">(2)</a>
    <li><a href="#ref-for-structuredserializewithtransfer②">3.2. The PortalHost interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-window">
   <a href="https://html.spec.whatwg.org/multipage/window-object.html#window">https://html.spec.whatwg.org/multipage/window-object.html#window</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-window">3.2. The PortalHost interface</a>
    <li><a href="#ref-for-window①">3.3. The PortalActivateEvent interface</a>
    <li><a href="#ref-for-window②">3.4. Miscellaneous extensions</a> <a href="#ref-for-window③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-windoweventhandlers">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#windoweventhandlers">https://html.spec.whatwg.org/multipage/webappapis.html#windoweventhandlers</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-windoweventhandlers">3.4. Miscellaneous extensions</a> <a href="#ref-for-windoweventhandlers①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-windowpostmessageoptions">
   <a href="https://html.spec.whatwg.org/multipage/window-object.html#windowpostmessageoptions">https://html.spec.whatwg.org/multipage/window-object.html#windowpostmessageoptions</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-windowpostmessageoptions">3.1. The portal element</a> <a href="#ref-for-windowpostmessageoptions①">(2)</a> <a href="#ref-for-windowpostmessageoptions②">(3)</a> <a href="#ref-for-windowpostmessageoptions③">(4)</a>
    <li><a href="#ref-for-windowpostmessageoptions④">3.2. The PortalHost interface</a> <a href="#ref-for-windowpostmessageoptions⑤">(2)</a> <a href="#ref-for-windowpostmessageoptions⑥">(3)</a> <a href="#ref-for-windowpostmessageoptions⑦">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-windowproxy">
   <a href="https://html.spec.whatwg.org/multipage/window-object.html#windowproxy">https://html.spec.whatwg.org/multipage/window-object.html#windowproxy</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-windowproxy">2. Concepts</a>
    <li><a href="#ref-for-windowproxy①">3.1. The portal element</a>
    <li><a href="#ref-for-windowproxy②">3.4. Miscellaneous extensions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-active-document">
   <a href="https://html.spec.whatwg.org/multipage/browsers.html#active-document">https://html.spec.whatwg.org/multipage/browsers.html#active-document</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-active-document">3.1. The portal element</a> <a href="#ref-for-active-document①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-document-window">
   <a href="https://html.spec.whatwg.org/multipage/window-object.html#concept-document-window">https://html.spec.whatwg.org/multipage/window-object.html#concept-document-window</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-document-window">2. Concepts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-becomes-browsing-context-connected">
   <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#becomes-browsing-context-connected">https://html.spec.whatwg.org/multipage/infrastructure.html#becomes-browsing-context-connected</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-becomes-browsing-context-connected">3.1. The portal element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-becomes-browsing-context-disconnected">
   <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#becomes-browsing-context-disconnected">https://html.spec.whatwg.org/multipage/infrastructure.html#becomes-browsing-context-disconnected</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-becomes-browsing-context-disconnected">3.1. The portal element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-body-element">
   <a href="https://html.spec.whatwg.org/multipage/sections.html#the-body-element">https://html.spec.whatwg.org/multipage/sections.html#the-body-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-body-element">3.4. Miscellaneous extensions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-window-bc">
   <a href="https://html.spec.whatwg.org/multipage/window-object.html#window-bc">https://html.spec.whatwg.org/multipage/window-object.html#window-bc</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-window-bc">3.4. Miscellaneous extensions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-browsing-context-group">
   <a href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context-group">https://html.spec.whatwg.org/multipage/browsers.html#browsing-context-group</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-browsing-context-group">3.1. The portal element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-browsing-context-connected">
   <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#browsing-context-connected">https://html.spec.whatwg.org/multipage/infrastructure.html#browsing-context-connected</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-browsing-context-connected">2. Concepts</a>
    <li><a href="#ref-for-browsing-context-connected①">3.1. The portal element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-close-a-browsing-context">
   <a href="https://html.spec.whatwg.org/multipage/window-object.html#close-a-browsing-context">https://html.spec.whatwg.org/multipage/window-object.html#close-a-browsing-context</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-close-a-browsing-context">2. Concepts</a> <a href="#ref-for-close-a-browsing-context①">(2)</a> <a href="#ref-for-close-a-browsing-context②">(3)</a>
    <li><a href="#ref-for-close-a-browsing-context③">3.1. The portal element</a> <a href="#ref-for-close-a-browsing-context④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-creating-a-new-top-level-browsing-context">
   <a href="https://html.spec.whatwg.org/multipage/browsers.html#creating-a-new-top-level-browsing-context">https://html.spec.whatwg.org/multipage/browsers.html#creating-a-new-top-level-browsing-context</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-creating-a-new-top-level-browsing-context">3.1. The portal element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-messageevent-data">
   <a href="https://html.spec.whatwg.org/multipage/comms.html#dom-messageevent-data">https://html.spec.whatwg.org/multipage/comms.html#dom-messageevent-data</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-messageevent-data">3.1. The portal element</a>
    <li><a href="#ref-for-dom-messageevent-data①">3.2. The PortalHost interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-a-browsing-context-is-discarded">
   <a href="https://html.spec.whatwg.org/multipage/window-object.html#a-browsing-context-is-discarded">https://html.spec.whatwg.org/multipage/window-object.html#a-browsing-context-is-discarded</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-a-browsing-context-is-discarded">2. Concepts</a> <a href="#ref-for-a-browsing-context-is-discarded①">(2)</a> <a href="#ref-for-a-browsing-context-is-discarded②">(3)</a>
    <li><a href="#ref-for-a-browsing-context-is-discarded③">3.1. The portal element</a> <a href="#ref-for-a-browsing-context-is-discarded④">(2)</a> <a href="#ref-for-a-browsing-context-is-discarded⑤">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-document-bc">
   <a href="https://html.spec.whatwg.org/multipage/browsers.html#concept-document-bc">https://html.spec.whatwg.org/multipage/browsers.html#concept-document-bc</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-document-bc">3.1. The portal element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-event-handler-content-attributes">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-content-attributes">https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-content-attributes</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event-handler-content-attributes">3.1. The portal element</a>
    <li><a href="#ref-for-event-handler-content-attributes①">3.4. Miscellaneous extensions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-event-handler-idl-attributes">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-idl-attributes">https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-idl-attributes</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event-handler-idl-attributes">3.4. Miscellaneous extensions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-event-loop">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop">https://html.spec.whatwg.org/multipage/webappapis.html#event-loop</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event-loop">2. Concepts</a> <a href="#ref-for-event-loop①">(2)</a> <a href="#ref-for-event-loop②">(3)</a>
    <li><a href="#ref-for-event-loop③">3.1. The portal element</a> <a href="#ref-for-event-loop④">(2)</a>
    <li><a href="#ref-for-event-loop⑤">3.2. The PortalHost interface</a> <a href="#ref-for-event-loop⑥">(2)</a> <a href="#ref-for-event-loop⑦">(3)</a>
    <li><a href="#ref-for-event-loop⑧">3.3. The PortalActivateEvent interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-frameset">
   <a href="https://html.spec.whatwg.org/multipage/obsolete.html#frameset">https://html.spec.whatwg.org/multipage/obsolete.html#frameset</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-frameset">3.4. Miscellaneous extensions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-iframe-element">
   <a href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-iframe-element">https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-iframe-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-iframe-element">3.1. The portal element</a> <a href="#ref-for-the-iframe-element①">(2)</a>
    <li><a href="#ref-for-the-iframe-element②">4.4. Integration with Fetch Metadata Request Headers</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-in-parallel">
   <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel">https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-in-parallel">2. Concepts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-limited-to-only-known-values">
   <a href="https://html.spec.whatwg.org/multipage/common-dom-interfaces.html#limited-to-only-known-values">https://html.spec.whatwg.org/multipage/common-dom-interfaces.html#limited-to-only-known-values</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-limited-to-only-known-values">3.1. The portal element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-navigate">
   <a href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#navigate">https://html.spec.whatwg.org/multipage/browsing-the-web.html#navigate</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-navigate">3.1. The portal element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-nested-browsing-context">
   <a href="https://html.spec.whatwg.org/multipage/browsers.html#nested-browsing-context">https://html.spec.whatwg.org/multipage/browsers.html#nested-browsing-context</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-nested-browsing-context">2. Concepts</a>
    <li><a href="#ref-for-nested-browsing-context①">3.1. The portal element</a> <a href="#ref-for-nested-browsing-context②">(2)</a> <a href="#ref-for-nested-browsing-context③">(3)</a>
    <li><a href="#ref-for-nested-browsing-context④">4.1. Overview</a>
    <li><a href="#ref-for-nested-browsing-context⑤">4.2. Integration with Content Security Policy</a> <a href="#ref-for-nested-browsing-context⑥">(2)</a>
    <li><a href="#ref-for-nested-browsing-context⑦">4.4. Integration with Fetch Metadata Request Headers</a> <a href="#ref-for-nested-browsing-context⑧">(2)</a> <a href="#ref-for-nested-browsing-context⑨">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-settings-object-origin">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-settings-object-origin">https://html.spec.whatwg.org/multipage/webappapis.html#concept-settings-object-origin</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-settings-object-origin">3.1. The portal element</a>
    <li><a href="#ref-for-concept-settings-object-origin①">3.2. The PortalHost interface</a> <a href="#ref-for-concept-settings-object-origin②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-parent-browsing-context">
   <a href="https://html.spec.whatwg.org/multipage/browsers.html#parent-browsing-context">https://html.spec.whatwg.org/multipage/browsers.html#parent-browsing-context</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-parent-browsing-context">4.2. Integration with Content Security Policy</a> <a href="#ref-for-parent-browsing-context①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-parse-a-url">
   <a href="https://html.spec.whatwg.org/multipage/urls-and-fetching.html#parse-a-url">https://html.spec.whatwg.org/multipage/urls-and-fetching.html#parse-a-url</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-parse-a-url">3.1. The portal element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-messageevent-ports">
   <a href="https://html.spec.whatwg.org/multipage/comms.html#dom-messageevent-ports">https://html.spec.whatwg.org/multipage/comms.html#dom-messageevent-ports</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-messageevent-ports">3.1. The portal element</a>
    <li><a href="#ref-for-dom-messageevent-ports①">3.2. The PortalHost interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-prompt-to-unload-a-document">
   <a href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#prompt-to-unload-a-document">https://html.spec.whatwg.org/multipage/browsing-the-web.html#prompt-to-unload-a-document</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-prompt-to-unload-a-document">2. Concepts</a>
    <li><a href="#ref-for-prompt-to-unload-a-document①">3.1. The portal element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-queue-a-task">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task">https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-queue-a-task">2. Concepts</a> <a href="#ref-for-queue-a-task①">(2)</a> <a href="#ref-for-queue-a-task②">(3)</a>
    <li><a href="#ref-for-queue-a-task③">3.1. The portal element</a>
    <li><a href="#ref-for-queue-a-task④">3.2. The PortalHost interface</a>
    <li><a href="#ref-for-queue-a-task⑤">3.3. The PortalActivateEvent interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-global-object-realm">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-global-object-realm">https://html.spec.whatwg.org/multipage/webappapis.html#concept-global-object-realm</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-global-object-realm">2. Concepts</a>
    <li><a href="#ref-for-concept-global-object-realm①">3.1. The portal element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-referrer-policy-attribute">
   <a href="https://html.spec.whatwg.org/multipage/urls-and-fetching.html#referrer-policy-attribute">https://html.spec.whatwg.org/multipage/urls-and-fetching.html#referrer-policy-attribute</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-referrer-policy-attribute">3.1. The portal element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-relevant-settings-object">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#relevant-settings-object">https://html.spec.whatwg.org/multipage/webappapis.html#relevant-settings-object</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-relevant-settings-object">3.1. The portal element</a>
    <li><a href="#ref-for-relevant-settings-object①">3.2. The PortalHost interface</a> <a href="#ref-for-relevant-settings-object②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-responsible-browsing-context">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#responsible-browsing-context">https://html.spec.whatwg.org/multipage/webappapis.html#responsible-browsing-context</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-responsible-browsing-context">3.2. The PortalHost interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-resulting-url-record">
   <a href="https://html.spec.whatwg.org/multipage/urls-and-fetching.html#resulting-url-record">https://html.spec.whatwg.org/multipage/urls-and-fetching.html#resulting-url-record</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-resulting-url-record">3.1. The portal element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-same-origin">
   <a href="https://html.spec.whatwg.org/multipage/origin.html#same-origin">https://html.spec.whatwg.org/multipage/origin.html#same-origin</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-same-origin">3.1. The portal element</a>
    <li><a href="#ref-for-same-origin①">3.2. The PortalHost interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-same-origin-domain">
   <a href="https://html.spec.whatwg.org/multipage/origin.html#same-origin-domain">https://html.spec.whatwg.org/multipage/origin.html#same-origin-domain</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-same-origin-domain">3.1. The portal element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-ascii-serialisation-of-an-origin">
   <a href="https://html.spec.whatwg.org/multipage/origin.html#ascii-serialisation-of-an-origin">https://html.spec.whatwg.org/multipage/origin.html#ascii-serialisation-of-an-origin</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-ascii-serialisation-of-an-origin">3.1. The portal element</a>
    <li><a href="#ref-for-ascii-serialisation-of-an-origin①">3.2. The PortalHost interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-session-history">
   <a href="https://html.spec.whatwg.org/multipage/history.html#session-history">https://html.spec.whatwg.org/multipage/history.html#session-history</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-session-history">2. Concepts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-messageevent-source">
   <a href="https://html.spec.whatwg.org/multipage/comms.html#dom-messageevent-source">https://html.spec.whatwg.org/multipage/comms.html#dom-messageevent-source</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-messageevent-source">3.1. The portal element</a> <a href="#ref-for-dom-messageevent-source①">(2)</a>
    <li><a href="#ref-for-dom-messageevent-source②">3.2. The PortalHost interface</a> <a href="#ref-for-dom-messageevent-source③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-environment-target-browsing-context">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-environment-target-browsing-context">https://html.spec.whatwg.org/multipage/webappapis.html#concept-environment-target-browsing-context</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-environment-target-browsing-context">4.2. Integration with Content Security Policy</a>
    <li><a href="#ref-for-concept-environment-target-browsing-context①">4.3. Integration with RFC 7034</a>
    <li><a href="#ref-for-concept-environment-target-browsing-context②">4.4. Integration with Fetch Metadata Request Headers</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-task-source">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#task-source">https://html.spec.whatwg.org/multipage/webappapis.html#task-source</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-task-source">2. Concepts</a> <a href="#ref-for-task-source①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-top-level-browsing-context">
   <a href="https://html.spec.whatwg.org/multipage/browsers.html#top-level-browsing-context">https://html.spec.whatwg.org/multipage/browsers.html#top-level-browsing-context</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-top-level-browsing-context">1. Introduction</a>
    <li><a href="#ref-for-top-level-browsing-context①">3.1. The portal element</a> <a href="#ref-for-top-level-browsing-context②">(2)</a>
    <li><a href="#ref-for-top-level-browsing-context③">3.3. The PortalActivateEvent interface</a>
    <li><a href="#ref-for-top-level-browsing-context④">3.4. Miscellaneous extensions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-event-unload">
   <a href="https://html.spec.whatwg.org/multipage/indices.html#event-unload">https://html.spec.whatwg.org/multipage/indices.html#event-unload</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event-unload">2. Concepts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valid-non-empty-url-potentially-surrounded-by-spaces">
   <a href="https://html.spec.whatwg.org/multipage/urls-and-fetching.html#valid-non-empty-url-potentially-surrounded-by-spaces">https://html.spec.whatwg.org/multipage/urls-and-fetching.html#valid-non-empty-url-potentially-surrounded-by-spaces</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valid-non-empty-url-potentially-surrounded-by-spaces">3.1. The portal element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-assert">
   <a href="https://infra.spec.whatwg.org/#assert">https://infra.spec.whatwg.org/#assert</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-assert">2. Concepts</a> <a href="#ref-for-assert①">(2)</a> <a href="#ref-for-assert②">(3)</a> <a href="#ref-for-assert③">(4)</a>
    <li><a href="#ref-for-assert④">3.1. The portal element</a> <a href="#ref-for-assert⑤">(2)</a> <a href="#ref-for-assert⑥">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-boolean">
   <a href="https://infra.spec.whatwg.org/#boolean">https://infra.spec.whatwg.org/#boolean</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-boolean">3.1. The portal element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-html-namespace">
   <a href="https://infra.spec.whatwg.org/#html-namespace">https://infra.spec.whatwg.org/#html-namespace</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-html-namespace">2. Concepts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-referrer-policy">
   <a href="https://w3c.github.io/webappsec-referrer-policy/#referrer-policy">https://w3c.github.io/webappsec-referrer-policy/#referrer-policy</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-referrer-policy">3.1. The portal element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-serviceworker">
   <a href="https://w3c.github.io/ServiceWorker/#serviceworker">https://w3c.github.io/ServiceWorker/#serviceworker</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-serviceworker">3.4. Miscellaneous extensions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-url-origin">
   <a href="https://url.spec.whatwg.org/#concept-url-origin">https://url.spec.whatwg.org/#concept-url-origin</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-url-origin">3.1. The portal element</a>
    <li><a href="#ref-for-concept-url-origin①">3.2. The PortalHost interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-url-scheme">
   <a href="https://url.spec.whatwg.org/#concept-url-scheme">https://url.spec.whatwg.org/#concept-url-scheme</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-url-scheme">3.1. The portal element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-url">
   <a href="https://url.spec.whatwg.org/#concept-url">https://url.spec.whatwg.org/#concept-url</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-url">3.1. The portal element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-url-parser">
   <a href="https://url.spec.whatwg.org/#concept-url-parser">https://url.spec.whatwg.org/#concept-url-parser</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-url-parser">3.1. The portal element</a>
    <li><a href="#ref-for-concept-url-parser①">3.2. The PortalHost interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-DOMException">
   <a href="https://heycam.github.io/webidl/#idl-DOMException">https://heycam.github.io/webidl/#idl-DOMException</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-DOMException">3.1. The portal element</a> <a href="#ref-for-idl-DOMException①">(2)</a> <a href="#ref-for-idl-DOMException②">(3)</a> <a href="#ref-for-idl-DOMException③">(4)</a> <a href="#ref-for-idl-DOMException④">(5)</a>
    <li><a href="#ref-for-idl-DOMException⑤">3.2. The PortalHost interface</a> <a href="#ref-for-idl-DOMException⑥">(2)</a>
    <li><a href="#ref-for-idl-DOMException⑦">3.3. The PortalActivateEvent interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-DOMString">
   <a href="https://heycam.github.io/webidl/#idl-DOMString">https://heycam.github.io/webidl/#idl-DOMString</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-DOMString">3.1. The portal element</a> <a href="#ref-for-idl-DOMString①">(2)</a>
    <li><a href="#ref-for-idl-DOMString②">3.2. The PortalHost interface</a>
    <li><a href="#ref-for-idl-DOMString③">3.3. The PortalActivateEvent interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-Exposed">
   <a href="https://heycam.github.io/webidl/#Exposed">https://heycam.github.io/webidl/#Exposed</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-Exposed">3.1. The portal element</a>
    <li><a href="#ref-for-Exposed①">3.2. The PortalHost interface</a>
    <li><a href="#ref-for-Exposed②">3.3. The PortalActivateEvent interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-invalidstateerror">
   <a href="https://heycam.github.io/webidl/#invalidstateerror">https://heycam.github.io/webidl/#invalidstateerror</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-invalidstateerror">3.1. The portal element</a> <a href="#ref-for-invalidstateerror①">(2)</a> <a href="#ref-for-invalidstateerror②">(3)</a> <a href="#ref-for-invalidstateerror③">(4)</a>
    <li><a href="#ref-for-invalidstateerror④">3.2. The PortalHost interface</a>
    <li><a href="#ref-for-invalidstateerror⑤">3.3. The PortalActivateEvent interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-NewObject">
   <a href="https://heycam.github.io/webidl/#NewObject">https://heycam.github.io/webidl/#NewObject</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-NewObject">3.1. The portal element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-syntaxerror">
   <a href="https://heycam.github.io/webidl/#syntaxerror">https://heycam.github.io/webidl/#syntaxerror</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-syntaxerror">3.1. The portal element</a>
    <li><a href="#ref-for-syntaxerror①">3.2. The PortalHost interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-USVString">
   <a href="https://heycam.github.io/webidl/#idl-USVString">https://heycam.github.io/webidl/#idl-USVString</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-USVString">3.1. The portal element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-frozen-array-type">
   <a href="https://heycam.github.io/webidl/#dfn-frozen-array-type">https://heycam.github.io/webidl/#dfn-frozen-array-type</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-frozen-array-type">3.1. The portal element</a>
    <li><a href="#ref-for-dfn-frozen-array-type①">3.2. The PortalHost interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-object">
   <a href="https://heycam.github.io/webidl/#idl-object">https://heycam.github.io/webidl/#idl-object</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-object">3.1. The portal element</a> <a href="#ref-for-idl-object①">(2)</a>
    <li><a href="#ref-for-idl-object②">3.2. The PortalHost interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-this">
   <a href="https://heycam.github.io/webidl/#this">https://heycam.github.io/webidl/#this</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-this">3.1. The portal element</a> <a href="#ref-for-this①">(2)</a> <a href="#ref-for-this②">(3)</a> <a href="#ref-for-this③">(4)</a>
    <li><a href="#ref-for-this④">3.2. The PortalHost interface</a>
    <li><a href="#ref-for-this⑤">3.3. The PortalActivateEvent interface</a> <a href="#ref-for-this⑥">(2)</a> <a href="#ref-for-this⑦">(3)</a> <a href="#ref-for-this⑧">(4)</a> <a href="#ref-for-this⑨">(5)</a>
    <li><a href="#ref-for-this①⓪">3.4. Miscellaneous extensions</a> <a href="#ref-for-this①①">(2)</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[csp-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-navigate-to" style="color:initial">navigate-to</span>
    </ul>
   <li>
    <a data-link-type="biblio">[DOM]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-event" style="color:initial">Event</span>
     <li><span class="dfn-paneled" id="term-for-dictdef-eventinit" style="color:initial">EventInit</span>
     <li><span class="dfn-paneled" id="term-for-eventtarget" style="color:initial">EventTarget</span>
     <li><span class="dfn-paneled" id="term-for-concept-node-adopt-ext" style="color:initial">adopting steps</span>
     <li><span class="dfn-paneled" id="term-for-concept-create-element" style="color:initial">creating an element</span>
     <li><span class="dfn-paneled" id="term-for-concept-event-create" style="color:initial">creating an event</span>
     <li><span class="dfn-paneled" id="term-for-concept-event-dispatch" style="color:initial">dispatch</span>
     <li><span class="dfn-paneled" id="term-for-concept-event-constructor-ext" style="color:initial">event constructing steps</span>
     <li><span class="dfn-paneled" id="term-for-concept-event-fire" style="color:initial">fire an event</span>
     <li><span class="dfn-paneled" id="term-for-concept-node-document" style="color:initial">node document</span>
     <li><span class="dfn-paneled" id="term-for-concept-reflect" style="color:initial">reflect</span>
     <li><span class="dfn-paneled" id="term-for-dom-event-type" style="color:initial">type</span>
    </ul>
   <li>
    <a data-link-type="biblio">[ECMASCRIPT]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-sec-agents" style="color:initial">agent</span>
     <li><span class="dfn-paneled" id="term-for-sec-promise-objects" style="color:initial">promise</span>
    </ul>
   <li>
    <a data-link-type="biblio">[FETCH]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-concept-request-destination" style="color:initial">destination</span>
     <li><span class="dfn-paneled" id="term-for-http-scheme" style="color:initial">http(s) scheme</span>
     <li><span class="dfn-paneled" id="term-for-concept-request-initiator" style="color:initial">initiator</span>
     <li><span class="dfn-paneled" id="term-for-concept-request" style="color:initial">request</span>
     <li><span class="dfn-paneled" id="term-for-concept-request-referrer-policy" style="color:initial">request referrer policy</span>
     <li><span class="dfn-paneled" id="term-for-concept-request-url" style="color:initial">request url</span>
     <li><span class="dfn-paneled" id="term-for-concept-request-reserved-client" style="color:initial">reserved client</span>
    </ul>
   <li>
    <a data-link-type="biblio">[HTML]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-cereactions" style="color:initial">CEReactions</span>
     <li><span class="dfn-paneled" id="term-for-eventhandler" style="color:initial">EventHandler</span>
     <li><span class="dfn-paneled" id="term-for-htmlconstructor" style="color:initial">HTMLConstructor</span>
     <li><span class="dfn-paneled" id="term-for-htmlelement" style="color:initial">HTMLElement</span>
     <li><span class="dfn-paneled" id="term-for-messageevent" style="color:initial">MessageEvent</span>
     <li><span class="dfn-paneled" id="term-for-messageport" style="color:initial">MessagePort</span>
     <li><span class="dfn-paneled" id="term-for-postmessageoptions" style="color:initial">PostMessageOptions</span>
     <li><span class="dfn-paneled" id="term-for-structureddeserializewithtransfer" style="color:initial">StructuredDeserializeWithTransfer</span>
     <li><span class="dfn-paneled" id="term-for-structuredserializewithtransfer" style="color:initial">StructuredSerializeWithTransfer</span>
     <li><span class="dfn-paneled" id="term-for-window" style="color:initial">Window</span>
     <li><span class="dfn-paneled" id="term-for-windoweventhandlers" style="color:initial">WindowEventHandlers</span>
     <li><span class="dfn-paneled" id="term-for-windowpostmessageoptions" style="color:initial">WindowPostMessageOptions</span>
     <li><span class="dfn-paneled" id="term-for-windowproxy" style="color:initial">WindowProxy</span>
     <li><span class="dfn-paneled" id="term-for-active-document" style="color:initial">active document</span>
     <li><span class="dfn-paneled" id="term-for-concept-document-window" style="color:initial">associated document</span>
     <li><span class="dfn-paneled" id="term-for-becomes-browsing-context-connected" style="color:initial">becomes browsing-context connected</span>
     <li><span class="dfn-paneled" id="term-for-becomes-browsing-context-disconnected" style="color:initial">becomes browsing-context disconnected</span>
     <li><span class="dfn-paneled" id="term-for-the-body-element" style="color:initial">body</span>
     <li><span class="dfn-paneled" id="term-for-window-bc" style="color:initial">browsing context <small>(for Window)</small></span>
     <li><span class="dfn-paneled" id="term-for-browsing-context-group" style="color:initial">browsing context group</span>
     <li><span class="dfn-paneled" id="term-for-browsing-context-connected" style="color:initial">browsing-context connected</span>
     <li><span class="dfn-paneled" id="term-for-close-a-browsing-context" style="color:initial">close a browsing context</span>
     <li><span class="dfn-paneled" id="term-for-creating-a-new-top-level-browsing-context" style="color:initial">create a new top-level browsing context</span>
     <li><span class="dfn-paneled" id="term-for-dom-messageevent-data" style="color:initial">data</span>
     <li><span class="dfn-paneled" id="term-for-a-browsing-context-is-discarded" style="color:initial">discard a browsing context</span>
     <li><span class="dfn-paneled" id="term-for-concept-document-bc" style="color:initial">document browsing context</span>
     <li><span class="dfn-paneled" id="term-for-event-handler-content-attributes" style="color:initial">event handler content attribute</span>
     <li><span class="dfn-paneled" id="term-for-event-handler-idl-attributes" style="color:initial">event handler idl attribute</span>
     <li><span class="dfn-paneled" id="term-for-event-loop" style="color:initial">event loop</span>
     <li><span class="dfn-paneled" id="term-for-frameset" style="color:initial">frameset</span>
     <li><span class="dfn-paneled" id="term-for-the-iframe-element" style="color:initial">iframe</span>
     <li><span class="dfn-paneled" id="term-for-in-parallel" style="color:initial">in parallel</span>
     <li><span class="dfn-paneled" id="term-for-limited-to-only-known-values" style="color:initial">limited to only known values</span>
     <li><span class="dfn-paneled" id="term-for-navigate" style="color:initial">navigate</span>
     <li><span class="dfn-paneled" id="term-for-nested-browsing-context" style="color:initial">nested browsing context</span>
     <li><span class="dfn-paneled" id="term-for-concept-settings-object-origin" style="color:initial">origin <small>(for environment settings object)</small></span>
     <li><span class="dfn-paneled" id="term-for-parent-browsing-context" style="color:initial">parent browsing context</span>
     <li><span class="dfn-paneled" id="term-for-parse-a-url" style="color:initial">parse a url</span>
     <li><span class="dfn-paneled" id="term-for-dom-messageevent-ports" style="color:initial">ports</span>
     <li><span class="dfn-paneled" id="term-for-prompt-to-unload-a-document" style="color:initial">prompt to unload</span>
     <li><span class="dfn-paneled" id="term-for-queue-a-task" style="color:initial">queue a task</span>
     <li><span class="dfn-paneled" id="term-for-concept-global-object-realm" style="color:initial">realm <small>(for global object)</small></span>
     <li><span class="dfn-paneled" id="term-for-referrer-policy-attribute" style="color:initial">referrer policy attribute</span>
     <li><span class="dfn-paneled" id="term-for-relevant-settings-object" style="color:initial">relevant settings object</span>
     <li><span class="dfn-paneled" id="term-for-responsible-browsing-context" style="color:initial">responsible browsing context</span>
     <li><span class="dfn-paneled" id="term-for-resulting-url-record" style="color:initial">resulting url record</span>
     <li><span class="dfn-paneled" id="term-for-same-origin" style="color:initial">same origin</span>
     <li><span class="dfn-paneled" id="term-for-same-origin-domain" style="color:initial">same origin-domain</span>
     <li><span class="dfn-paneled" id="term-for-ascii-serialisation-of-an-origin" style="color:initial">serialization of an origin</span>
     <li><span class="dfn-paneled" id="term-for-session-history" style="color:initial">session history</span>
     <li><span class="dfn-paneled" id="term-for-dom-messageevent-source" style="color:initial">source</span>
     <li><span class="dfn-paneled" id="term-for-concept-environment-target-browsing-context" style="color:initial">target browsing context</span>
     <li><span class="dfn-paneled" id="term-for-task-source" style="color:initial">task source</span>
     <li><span class="dfn-paneled" id="term-for-top-level-browsing-context" style="color:initial">top-level browsing context</span>
     <li><span class="dfn-paneled" id="term-for-event-unload" style="color:initial">unload</span>
     <li><span class="dfn-paneled" id="term-for-valid-non-empty-url-potentially-surrounded-by-spaces" style="color:initial">valid non-empty url potentially surrounded by spaces</span>
    </ul>
   <li>
    <a data-link-type="biblio">[INFRA]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-assert" style="color:initial">assert</span>
     <li><span class="dfn-paneled" id="term-for-boolean" style="color:initial">boolean</span>
     <li><span class="dfn-paneled" id="term-for-html-namespace" style="color:initial">html namespace</span>
    </ul>
   <li>
    <a data-link-type="biblio">[REFERRER-POLICY]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-referrer-policy" style="color:initial">referrer policy</span>
    </ul>
   <li>
    <a data-link-type="biblio">[service-workers-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-serviceworker" style="color:initial">ServiceWorker</span>
    </ul>
   <li>
    <a data-link-type="biblio">[URL]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-concept-url-origin" style="color:initial">origin</span>
     <li><span class="dfn-paneled" id="term-for-concept-url-scheme" style="color:initial">scheme</span>
     <li><span class="dfn-paneled" id="term-for-concept-url" style="color:initial">url</span>
     <li><span class="dfn-paneled" id="term-for-concept-url-parser" style="color:initial">url parser</span>
    </ul>
   <li>
    <a data-link-type="biblio">[WebIDL]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-idl-DOMException" style="color:initial">DOMException</span>
     <li><span class="dfn-paneled" id="term-for-idl-DOMString" style="color:initial">DOMString</span>
     <li><span class="dfn-paneled" id="term-for-Exposed" style="color:initial">Exposed</span>
     <li><span class="dfn-paneled" id="term-for-invalidstateerror" style="color:initial">InvalidStateError</span>
     <li><span class="dfn-paneled" id="term-for-NewObject" style="color:initial">NewObject</span>
     <li><span class="dfn-paneled" id="term-for-syntaxerror" style="color:initial">SyntaxError</span>
     <li><span class="dfn-paneled" id="term-for-idl-USVString" style="color:initial">USVString</span>
     <li><span class="dfn-paneled" id="term-for-dfn-frozen-array-type" style="color:initial">frozen array type</span>
     <li><span class="dfn-paneled" id="term-for-idl-object" style="color:initial">object</span>
     <li><span class="dfn-paneled" id="term-for-this" style="color:initial">this</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-csp">[CSP]
   <dd>Mike West. <a href="https://www.w3.org/TR/CSP3/">Content Security Policy Level 3</a>. 15 October 2018. WD. URL: <a href="https://www.w3.org/TR/CSP3/">https://www.w3.org/TR/CSP3/</a>
   <dt id="biblio-dom">[DOM]
   <dd>Anne van Kesteren. <a href="https://dom.spec.whatwg.org/">DOM Standard</a>. Living Standard. URL: <a href="https://dom.spec.whatwg.org/">https://dom.spec.whatwg.org/</a>
   <dt id="biblio-ecmascript">[ECMASCRIPT]
   <dd><a href="https://tc39.github.io/ecma262/">ECMAScript Language Specification</a>. URL: <a href="https://tc39.github.io/ecma262/">https://tc39.github.io/ecma262/</a>
   <dt id="biblio-fetch">[FETCH]
   <dd>Anne van Kesteren. <a href="https://fetch.spec.whatwg.org/">Fetch Standard</a>. Living Standard. URL: <a href="https://fetch.spec.whatwg.org/">https://fetch.spec.whatwg.org/</a>
   <dt id="biblio-html">[HTML]
   <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/">HTML Standard</a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a>
   <dt id="biblio-infra">[INFRA]
   <dd>Anne van Kesteren; Domenic Denicola. <a href="https://infra.spec.whatwg.org/">Infra Standard</a>. Living Standard. URL: <a href="https://infra.spec.whatwg.org/">https://infra.spec.whatwg.org/</a>
   <dt id="biblio-referrer-policy">[REFERRER-POLICY]
   <dd>Jochen Eisinger; Emily Stark. <a href="https://www.w3.org/TR/referrer-policy/">Referrer Policy</a>. 26 January 2017. CR. URL: <a href="https://www.w3.org/TR/referrer-policy/">https://www.w3.org/TR/referrer-policy/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
   <dt id="biblio-service-workers-1">[SERVICE-WORKERS-1]
   <dd>Alex Russell; et al. <a href="https://www.w3.org/TR/service-workers-1/">Service Workers 1</a>. 2 November 2017. WD. URL: <a href="https://www.w3.org/TR/service-workers-1/">https://www.w3.org/TR/service-workers-1/</a>
   <dt id="biblio-url">[URL]
   <dd>Anne van Kesteren. <a href="https://url.spec.whatwg.org/">URL Standard</a>. Living Standard. URL: <a href="https://url.spec.whatwg.org/">https://url.spec.whatwg.org/</a>
   <dt id="biblio-webidl">[WebIDL]
   <dd>Boris Zbarsky. <a href="https://heycam.github.io/webidl/">Web IDL</a>. 15 December 2016. ED. URL: <a href="https://heycam.github.io/webidl/">https://heycam.github.io/webidl/</a>
  </dl>
  <h3 class="no-num no-ref heading settled" id="informative"><span class="content">Informative References</span><a class="self-link" href="#informative"></a></h3>
  <dl>
   <dt id="biblio-rfc7034">[RFC7034]
   <dd>D. Ross; T. Gondrom. <a href="https://tools.ietf.org/html/rfc7034">HTTP Header Field X-Frame-Options</a>. October 2013. Informational. URL: <a href="https://tools.ietf.org/html/rfc7034">https://tools.ietf.org/html/rfc7034</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">IDL Index</span><a class="self-link" href="#idl-index"></a></h2>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed③"><c- g>Exposed</c-></a>=<c- n>Window</c->, <a class="idl-code" data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/dom.html#htmlconstructor" id="ref-for-htmlconstructor①"><c- g>HTMLConstructor</c-></a>]
<c- b>interface</c-> <a href="#htmlportalelement"><code><c- g>HTMLPortalElement</c-></code></a> : <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/dom.html#htmlelement" id="ref-for-htmlelement①"><c- n>HTMLElement</c-></a> {
    [<a class="idl-code" data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions" id="ref-for-cereactions②"><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-USVString" id="ref-for-idl-USVString①"><c- b>USVString</c-></a> <a class="idl-code" data-link-type="attribute" data-type="USVString" href="#dom-htmlportalelement-src" id="ref-for-dom-htmlportalelement-src①"><c- g>src</c-></a>;
    [<a class="idl-code" data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/custom-elements.html#cereactions" id="ref-for-cereactions①①"><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString④"><c- b>DOMString</c-></a> <a class="idl-code" data-link-type="attribute" data-type="DOMString" href="#dom-htmlportalelement-referrerpolicy" id="ref-for-dom-htmlportalelement-referrerpolicy①"><c- g>referrerPolicy</c-></a>;

    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#NewObject" id="ref-for-NewObject①"><c- g>NewObject</c-></a>] <c- b>Promise</c->&lt;<c- b>void</c->> <a class="idl-code" data-link-type="method" href="#dom-htmlportalelement-activate" id="ref-for-dom-htmlportalelement-activate②①"><c- g>activate</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-portalactivateoptions" id="ref-for-dictdef-portalactivateoptions①"><c- n>PortalActivateOptions</c-></a> <a href="#dom-htmlportalelement-activate-options-options"><code><c- g>options</c-></code></a>);
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-htmlportalelement-postmessage" id="ref-for-dom-htmlportalelement-postmessage①"><c- g>postMessage</c-></a>(<c- b>any</c-> <a href="#dom-htmlportalelement-postmessage-message-targetorigin-transfer-message"><code><c- g>message</c-></code></a>, <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①①"><c- b>DOMString</c-></a> <a href="#dom-htmlportalelement-postmessage-message-targetorigin-transfer-targetorigin"><code><c- g>targetOrigin</c-></code></a>, <c- b>optional</c-> <c- b>sequence</c->&lt;<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-object" id="ref-for-idl-object③"><c- b>object</c-></a>> <a href="#dom-htmlportalelement-postmessage-message-targetorigin-transfer-transfer"><code><c- g>transfer</c-></code></a> = []);
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-htmlportalelement-postmessage-message-options" id="ref-for-dom-htmlportalelement-postmessage-message-options②"><c- g>postMessage</c-></a>(<c- b>any</c-> <a href="#dom-htmlportalelement-postmessage-message-options-message"><code><c- g>message</c-></code></a>, <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/window-object.html#windowpostmessageoptions" id="ref-for-windowpostmessageoptions⑧"><c- n>WindowPostMessageOptions</c-></a> <a href="#dom-htmlportalelement-postmessage-message-options-options"><code><c- g>options</c-></code></a>);

    <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler⑤"><c- n>EventHandler</c-></a> <a data-type="EventHandler" href="#dom-htmlportalelement-onmessage"><code><c- g>onmessage</c-></code></a>;
    <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler①①"><c- n>EventHandler</c-></a> <a data-type="EventHandler" href="#dom-htmlportalelement-onmessageerror"><code><c- g>onmessageerror</c-></code></a>;
};

<c- b>dictionary</c-> <a href="#dictdef-portalactivateoptions"><code><c- g>PortalActivateOptions</c-></code></a> {
    <c- b>any</c-> <a data-default="null" data-type="any " href="#dom-portalactivateoptions-data"><code><c- g>data</c-></code></a> = <c- b>null</c->;
    <c- b>sequence</c->&lt;<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-object" id="ref-for-idl-object①①"><c- b>object</c-></a>> <a data-default="[]" data-type="sequence<object> " href="#dom-portalactivateoptions-transfer"><code><c- g>transfer</c-></code></a> = [];
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①①"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <a href="#portalhost"><code><c- g>PortalHost</c-></code></a> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#eventtarget" id="ref-for-eventtarget①"><c- n>EventTarget</c-></a> {
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-portalhost-postmessage" id="ref-for-dom-portalhost-postmessage①"><c- g>postMessage</c-></a>(<c- b>any</c-> <a href="#dom-portalhost-postmessage-message-targetorigin-transfer-message"><code><c- g>message</c-></code></a>, <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString②①"><c- b>DOMString</c-></a> <a href="#dom-portalhost-postmessage-message-targetorigin-transfer-targetorigin"><code><c- g>targetOrigin</c-></code></a>, <c- b>optional</c-> <c- b>sequence</c->&lt;<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-object" id="ref-for-idl-object②①"><c- b>object</c-></a>> <a href="#dom-portalhost-postmessage-message-targetorigin-transfer-transfer"><code><c- g>transfer</c-></code></a> = []);
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-portalhost-postmessage-message-options" id="ref-for-dom-portalhost-postmessage-message-options②"><c- g>postMessage</c-></a>(<c- b>any</c-> <a href="#dom-portalhost-postmessage-message-options-message"><code><c- g>message</c-></code></a>, <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/window-object.html#windowpostmessageoptions" id="ref-for-windowpostmessageoptions④①"><c- n>WindowPostMessageOptions</c-></a> <a href="#dom-portalhost-postmessage-message-options-options"><code><c- g>options</c-></code></a>);

    <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler②①"><c- n>EventHandler</c-></a> <a data-type="EventHandler" href="#dom-portalhost-onmessage"><code><c- g>onmessage</c-></code></a>;
    <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler③①"><c- n>EventHandler</c-></a> <a data-type="EventHandler" href="#dom-portalhost-onmessageerror"><code><c- g>onmessageerror</c-></code></a>;
};

[<a href="#dom-portalactivateevent-portalactivateevent"><code><c- g>Constructor</c-></code></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString③①"><c- b>DOMString</c-></a> <a href="#dom-portalactivateevent-portalactivateevent-type-eventinitdict-type"><code><c- g>type</c-></code></a>, <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-portalactivateeventinit" id="ref-for-dictdef-portalactivateeventinit①"><c- n>PortalActivateEventInit</c-></a> <a href="#dom-portalactivateevent-portalactivateevent-type-eventinitdict-eventinitdict"><code><c- g>eventInitDict</c-></code></a>), <a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed②①"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <a href="#portalactivateevent"><code><c- g>PortalActivateEvent</c-></code></a> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#event" id="ref-for-event①"><c- n>Event</c-></a> {
    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>any</c-> <a data-readonly data-type="any" href="#dom-portalactivateevent-data"><code><c- g>data</c-></code></a>;
    <a class="n" data-link-type="idl-name" href="#htmlportalelement" id="ref-for-htmlportalelement②①"><c- n>HTMLPortalElement</c-></a> <a class="idl-code" data-link-type="method" href="#dom-portalactivateevent-adoptpredecessor" id="ref-for-dom-portalactivateevent-adoptpredecessor②①"><c- g>adoptPredecessor</c-></a>();
};

<c- b>dictionary</c-> <a href="#dictdef-portalactivateeventinit"><code><c- g>PortalActivateEventInit</c-></code></a> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#dictdef-eventinit" id="ref-for-dictdef-eventinit①"><c- n>EventInit</c-></a> {
    <c- b>any</c-> <a data-default="null" data-type="any " href="#dom-portalactivateeventinit-data"><code><c- g>data</c-></code></a> = <c- b>null</c->;
};

<c- b>typedef</c-> (<a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/window-object.html#windowproxy" id="ref-for-windowproxy②①"><c- n>WindowProxy</c-></a> <c- b>or</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/web-messaging.html#messageport" id="ref-for-messageport②①"><c- n>MessagePort</c-></a> <c- b>or</c-> <a class="n" data-link-type="idl-name" href="https://w3c.github.io/ServiceWorker/#serviceworker" id="ref-for-serviceworker①"><c- n>ServiceWorker</c-></a> <c- b>or</c-> <a class="n" data-link-type="idl-name" href="#htmlportalelement" id="ref-for-htmlportalelement③①"><c- n>HTMLPortalElement</c-></a> <c- b>or</c-> <a class="n" data-link-type="idl-name" href="#portalhost" id="ref-for-portalhost③①"><c- n>PortalHost</c-></a>) <a href="#typedefdef-messageeventsource"><code><c- g>MessageEventSource</c-></code></a>;

<c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/multipage/window-object.html#window" id="ref-for-window②①"><c- g>Window</c-></a> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#portalhost" id="ref-for-portalhost⑤①"><c- n>PortalHost</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="PortalHost?" href="#dom-window-portalhost" id="ref-for-dom-window-portalhost①①"><c- g>portalHost</c-></a>;
};

<c- b>partial</c-> <c- b>interface</c-> <c- b>mixin</c-> <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/multipage/webappapis.html#windoweventhandlers" id="ref-for-windoweventhandlers②"><c- g>WindowEventHandlers</c-></a> {
    <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler④①"><c- n>EventHandler</c-></a> <a data-type="EventHandler" href="#dom-windoweventhandlers-onportalactivate"><code><c- g>onportalactivate</c-></code></a>;
};

</pre>
  <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content">Issues Index</span><a class="self-link" href="#issues-index"></a></h2>
  <div style="counter-reset:issue">
   <div class="issue"> In the case that structured deserialization throws, it may be useful to do something else to indicate it,
    rather than simply providing null data. <a href="#issue-b49e4903"> ↵ </a></div>
   <div class="issue"> We need to specify how the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/history.html#session-history">session history</a> of each browsing context is
    affected by activation, and supply non-normative text that explains how
    these histories are expected to be presented to the user. <a href="#issue-0d72b101"> ↵ </a></div>
   <div class="issue"> It might be convenient to not immediately detach the portal element, but instead to do so
    in a microtask. This would allow developers to reinsert the <code><a data-link-type="element" href="#elementdef-portal">portal</a></code> element without losing
    its browsing context. <a href="#issue-833dc9f1"> ↵ </a></div>
   <div class="issue"> We should expand this section further. <a href="#issue-6b2c0ac1"> ↵ </a></div>
   <div class="issue"> <code class="idl"><a data-link-type="idl" href="#dom-htmlportalelement-activate">activate(options)</a></code> should also respect the CSP <a data-link-type="dfn" href="https://w3c.github.io/webappsec-csp/#navigate-to">navigate-to</a> directive. <a href="#issue-0bcb49e2"> ↵ </a></div>
  </div>
  <aside class="dfn-panel" data-for="portal-state">
   <b><a href="#portal-state">#portal-state</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-portal-state">2. Concepts</a> <a href="#ref-for-portal-state①">(2)</a> <a href="#ref-for-portal-state②">(3)</a> <a href="#ref-for-portal-state③">(4)</a> <a href="#ref-for-portal-state④">(5)</a> <a href="#ref-for-portal-state⑤">(6)</a> <a href="#ref-for-portal-state⑥">(7)</a> <a href="#ref-for-portal-state⑦">(8)</a> <a href="#ref-for-portal-state⑧">(9)</a>
    <li><a href="#ref-for-portal-state⑨">3.1. The portal element</a> <a href="#ref-for-portal-state①⓪">(2)</a>
    <li><a href="#ref-for-portal-state①①">3.2. The PortalHost interface</a>
    <li><a href="#ref-for-portal-state①②">3.4. Miscellaneous extensions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="portal-browsing-context">
   <b><a href="#portal-browsing-context">#portal-browsing-context</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-portal-browsing-context">2. Concepts</a> <a href="#ref-for-portal-browsing-context①">(2)</a> <a href="#ref-for-portal-browsing-context②">(3)</a>
    <li><a href="#ref-for-portal-browsing-context③">3.1. The portal element</a> <a href="#ref-for-portal-browsing-context④">(2)</a> <a href="#ref-for-portal-browsing-context⑤">(3)</a> <a href="#ref-for-portal-browsing-context⑥">(4)</a> <a href="#ref-for-portal-browsing-context⑦">(5)</a>
    <li><a href="#ref-for-portal-browsing-context⑧">3.2. The PortalHost interface</a>
    <li><a href="#ref-for-portal-browsing-context⑨">3.4. Miscellaneous extensions</a> <a href="#ref-for-portal-browsing-context①⓪">(2)</a>
    <li><a href="#ref-for-portal-browsing-context①①">4.1. Overview</a>
    <li><a href="#ref-for-portal-browsing-context①②">4.2. Integration with Content Security Policy</a> <a href="#ref-for-portal-browsing-context①③">(2)</a>
    <li><a href="#ref-for-portal-browsing-context①④">4.3. Integration with RFC 7034</a> <a href="#ref-for-portal-browsing-context①⑤">(2)</a>
    <li><a href="#ref-for-portal-browsing-context①⑥">4.4. Integration with Fetch Metadata Request Headers</a> <a href="#ref-for-portal-browsing-context①⑦">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="host-element">
   <b><a href="#host-element">#host-element</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-host-element">2. Concepts</a> <a href="#ref-for-host-element①">(2)</a> <a href="#ref-for-host-element②">(3)</a> <a href="#ref-for-host-element③">(4)</a>
    <li><a href="#ref-for-host-element④">3.1. The portal element</a> <a href="#ref-for-host-element⑤">(2)</a>
    <li><a href="#ref-for-host-element⑥">3.2. The PortalHost interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="host-browsing-context">
   <b><a href="#host-browsing-context">#host-browsing-context</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-host-browsing-context">2. Concepts</a> <a href="#ref-for-host-browsing-context①">(2)</a>
    <li><a href="#ref-for-host-browsing-context②">3.2. The PortalHost interface</a> <a href="#ref-for-host-browsing-context③">(2)</a>
    <li><a href="#ref-for-host-browsing-context④">4.2. Integration with Content Security Policy</a>
    <li><a href="#ref-for-host-browsing-context⑤">4.3. Integration with RFC 7034</a> <a href="#ref-for-host-browsing-context⑥">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="portal-task-source">
   <b><a href="#portal-task-source">#portal-task-source</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-portal-task-source">2. Concepts</a> <a href="#ref-for-portal-task-source①">(2)</a> <a href="#ref-for-portal-task-source②">(3)</a>
    <li><a href="#ref-for-portal-task-source③">3.1. The portal element</a>
    <li><a href="#ref-for-portal-task-source④">3.2. The PortalHost interface</a>
    <li><a href="#ref-for-portal-task-source⑤">3.3. The PortalActivateEvent interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="activate-a-portal-browsing-context">
   <b><a href="#activate-a-portal-browsing-context">#activate-a-portal-browsing-context</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-activate-a-portal-browsing-context">2. Concepts</a> <a href="#ref-for-activate-a-portal-browsing-context①">(2)</a>
    <li><a href="#ref-for-activate-a-portal-browsing-context②">3.1. The portal element</a>
    <li><a href="#ref-for-activate-a-portal-browsing-context③">3.2. The PortalHost interface</a> <a href="#ref-for-activate-a-portal-browsing-context④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="adopt-the-predecessor-browsing-context">
   <b><a href="#adopt-the-predecessor-browsing-context">#adopt-the-predecessor-browsing-context</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-adopt-the-predecessor-browsing-context">2. Concepts</a> <a href="#ref-for-adopt-the-predecessor-browsing-context①">(2)</a>
    <li><a href="#ref-for-adopt-the-predecessor-browsing-context②">3.1. The portal element</a>
    <li><a href="#ref-for-adopt-the-predecessor-browsing-context③">3.3. The PortalActivateEvent interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="elementdef-portal">
   <b><a href="#elementdef-portal">#elementdef-portal</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-portal">2. Concepts</a> <a href="#ref-for-elementdef-portal①">(2)</a> <a href="#ref-for-elementdef-portal②">(3)</a>
    <li><a href="#ref-for-elementdef-portal③">3.1. The portal element</a> <a href="#ref-for-elementdef-portal④">(2)</a> <a href="#ref-for-elementdef-portal⑤">(3)</a> <a href="#ref-for-elementdef-portal⑥">(4)</a> <a href="#ref-for-elementdef-portal⑦">(5)</a> <a href="#ref-for-elementdef-portal⑧">(6)</a> <a href="#ref-for-elementdef-portal⑨">(7)</a> <a href="#ref-for-elementdef-portal①⓪">(8)</a> <a href="#ref-for-elementdef-portal①①">(9)</a> <a href="#ref-for-elementdef-portal①②">(10)</a> <a href="#ref-for-elementdef-portal①③">(11)</a> <a href="#ref-for-elementdef-portal①④">(12)</a> <a href="#ref-for-elementdef-portal①⑤">(13)</a> <a href="#ref-for-elementdef-portal①⑥">(14)</a> <a href="#ref-for-elementdef-portal①⑦">(15)</a> <a href="#ref-for-elementdef-portal①⑧">(16)</a> <a href="#ref-for-elementdef-portal①⑨">(17)</a> <a href="#ref-for-elementdef-portal②⓪">(18)</a> <a href="#ref-for-elementdef-portal②①">(19)</a> <a href="#ref-for-elementdef-portal②②">(20)</a> <a href="#ref-for-elementdef-portal②③">(21)</a>
    <li><a href="#ref-for-elementdef-portal②④">3.3. The PortalActivateEvent interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="htmlportalelement-guest-browsing-context">
   <b><a href="#htmlportalelement-guest-browsing-context">#htmlportalelement-guest-browsing-context</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-htmlportalelement-guest-browsing-context">2. Concepts</a>
    <li><a href="#ref-for-htmlportalelement-guest-browsing-context①">3.1. The portal element</a> <a href="#ref-for-htmlportalelement-guest-browsing-context②">(2)</a> <a href="#ref-for-htmlportalelement-guest-browsing-context③">(3)</a> <a href="#ref-for-htmlportalelement-guest-browsing-context④">(4)</a> <a href="#ref-for-htmlportalelement-guest-browsing-context⑤">(5)</a> <a href="#ref-for-htmlportalelement-guest-browsing-context⑥">(6)</a> <a href="#ref-for-htmlportalelement-guest-browsing-context⑦">(7)</a> <a href="#ref-for-htmlportalelement-guest-browsing-context⑧">(8)</a> <a href="#ref-for-htmlportalelement-guest-browsing-context⑨">(9)</a> <a href="#ref-for-htmlportalelement-guest-browsing-context①⓪">(10)</a> <a href="#ref-for-htmlportalelement-guest-browsing-context①①">(11)</a>
    <li><a href="#ref-for-htmlportalelement-guest-browsing-context①②">3.2. The PortalHost interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="htmlportalelement-just-adopted-flag">
   <b><a href="#htmlportalelement-just-adopted-flag">#htmlportalelement-just-adopted-flag</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-htmlportalelement-just-adopted-flag">2. Concepts</a> <a href="#ref-for-htmlportalelement-just-adopted-flag①">(2)</a> <a href="#ref-for-htmlportalelement-just-adopted-flag②">(3)</a>
    <li><a href="#ref-for-htmlportalelement-just-adopted-flag③">3.1. The portal element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="element-attrdef-portal-src">
   <b><a href="#element-attrdef-portal-src">#element-attrdef-portal-src</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-element-attrdef-portal-src">3.1. The portal element</a> <a href="#ref-for-element-attrdef-portal-src①">(2)</a> <a href="#ref-for-element-attrdef-portal-src②">(3)</a> <a href="#ref-for-element-attrdef-portal-src③">(4)</a> <a href="#ref-for-element-attrdef-portal-src④">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="element-attrdef-portal-referrerpolicy">
   <b><a href="#element-attrdef-portal-referrerpolicy">#element-attrdef-portal-referrerpolicy</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-element-attrdef-portal-referrerpolicy">3.1. The portal element</a> <a href="#ref-for-element-attrdef-portal-referrerpolicy①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="htmlportalelement">
   <b><a href="#htmlportalelement">#htmlportalelement</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-htmlportalelement">2. Concepts</a>
    <li><a href="#ref-for-htmlportalelement①">3.1. The portal element</a>
    <li><a href="#ref-for-htmlportalelement②">3.3. The PortalActivateEvent interface</a>
    <li><a href="#ref-for-htmlportalelement③">3.4. Miscellaneous extensions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-htmlportalelement-onmessage">
   <b><a href="#dom-htmlportalelement-onmessage">#dom-htmlportalelement-onmessage</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-htmlportalelement-onmessage">3.1. The portal element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-htmlportalelement-onmessageerror">
   <b><a href="#dom-htmlportalelement-onmessageerror">#dom-htmlportalelement-onmessageerror</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-htmlportalelement-onmessageerror">3.1. The portal element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-portalactivateoptions">
   <b><a href="#dictdef-portalactivateoptions">#dictdef-portalactivateoptions</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-portalactivateoptions">3.1. The portal element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-portalactivateoptions-data">
   <b><a href="#dom-portalactivateoptions-data">#dom-portalactivateoptions-data</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-portalactivateoptions-data">3.1. The portal element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-portalactivateoptions-transfer">
   <b><a href="#dom-portalactivateoptions-transfer">#dom-portalactivateoptions-transfer</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-portalactivateoptions-transfer">3.1. The portal element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-htmlportalelement-src">
   <b><a href="#dom-htmlportalelement-src">#dom-htmlportalelement-src</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-htmlportalelement-src">3.1. The portal element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-htmlportalelement-referrerpolicy">
   <b><a href="#dom-htmlportalelement-referrerpolicy">#dom-htmlportalelement-referrerpolicy</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-htmlportalelement-referrerpolicy">3.1. The portal element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-htmlportalelement-activate">
   <b><a href="#dom-htmlportalelement-activate">#dom-htmlportalelement-activate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-htmlportalelement-activate">2. Concepts</a> <a href="#ref-for-dom-htmlportalelement-activate①">(2)</a>
    <li><a href="#ref-for-dom-htmlportalelement-activate②">3.1. The portal element</a>
    <li><a href="#ref-for-dom-htmlportalelement-activate③">4.2. Integration with Content Security Policy</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-htmlportalelement-postmessage">
   <b><a href="#dom-htmlportalelement-postmessage">#dom-htmlportalelement-postmessage</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-htmlportalelement-postmessage">3.1. The portal element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-htmlportalelement-postmessage-message-options">
   <b><a href="#dom-htmlportalelement-postmessage-message-options">#dom-htmlportalelement-postmessage-message-options</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-htmlportalelement-postmessage-message-options">3.1. The portal element</a> <a href="#ref-for-dom-htmlportalelement-postmessage-message-options①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="htmlportalelement-may-have-a-guest-browsing-context">
   <b><a href="#htmlportalelement-may-have-a-guest-browsing-context">#htmlportalelement-may-have-a-guest-browsing-context</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-htmlportalelement-may-have-a-guest-browsing-context">2. Concepts</a>
    <li><a href="#ref-for-htmlportalelement-may-have-a-guest-browsing-context①">3.1. The portal element</a> <a href="#ref-for-htmlportalelement-may-have-a-guest-browsing-context②">(2)</a> <a href="#ref-for-htmlportalelement-may-have-a-guest-browsing-context③">(3)</a> <a href="#ref-for-htmlportalelement-may-have-a-guest-browsing-context④">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="htmlportalelement-close-a-portal-element">
   <b><a href="#htmlportalelement-close-a-portal-element">#htmlportalelement-close-a-portal-element</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-htmlportalelement-close-a-portal-element">3.1. The portal element</a> <a href="#ref-for-htmlportalelement-close-a-portal-element①">(2)</a> <a href="#ref-for-htmlportalelement-close-a-portal-element②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="htmlportalelement-set-the-source-url-of-a-portal-element">
   <b><a href="#htmlportalelement-set-the-source-url-of-a-portal-element">#htmlportalelement-set-the-source-url-of-a-portal-element</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-htmlportalelement-set-the-source-url-of-a-portal-element">3.1. The portal element</a> <a href="#ref-for-htmlportalelement-set-the-source-url-of-a-portal-element①">(2)</a> <a href="#ref-for-htmlportalelement-set-the-source-url-of-a-portal-element②">(3)</a> <a href="#ref-for-htmlportalelement-set-the-source-url-of-a-portal-element③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="eventdef-htmlportalelement-message">
   <b><a href="#eventdef-htmlportalelement-message">#eventdef-htmlportalelement-message</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-eventdef-htmlportalelement-message">3.2. The PortalHost interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="eventdef-htmlportalelement-messageerror">
   <b><a href="#eventdef-htmlportalelement-messageerror">#eventdef-htmlportalelement-messageerror</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-eventdef-htmlportalelement-messageerror">3.2. The PortalHost interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="portal-host-object">
   <b><a href="#portal-host-object">#portal-host-object</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-portal-host-object">3.1. The portal element</a>
    <li><a href="#ref-for-portal-host-object①">3.2. The PortalHost interface</a>
    <li><a href="#ref-for-portal-host-object②">3.4. Miscellaneous extensions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="portalhost">
   <b><a href="#portalhost">#portalhost</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-portalhost">2. Concepts</a>
    <li><a href="#ref-for-portalhost①">3.2. The PortalHost interface</a> <a href="#ref-for-portalhost②">(2)</a>
    <li><a href="#ref-for-portalhost③">3.4. Miscellaneous extensions</a> <a href="#ref-for-portalhost④">(2)</a> <a href="#ref-for-portalhost⑤">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-portalhost-postmessage">
   <b><a href="#dom-portalhost-postmessage">#dom-portalhost-postmessage</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-portalhost-postmessage">3.2. The PortalHost interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-portalhost-postmessage-message-options">
   <b><a href="#dom-portalhost-postmessage-message-options">#dom-portalhost-postmessage-message-options</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-portalhost-postmessage-message-options">3.2. The PortalHost interface</a> <a href="#ref-for-dom-portalhost-postmessage-message-options①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="eventdef-portalhost-message">
   <b><a href="#eventdef-portalhost-message">#eventdef-portalhost-message</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-eventdef-portalhost-message">3.1. The portal element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="eventdef-portalhost-messageerror">
   <b><a href="#eventdef-portalhost-messageerror">#eventdef-portalhost-messageerror</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-eventdef-portalhost-messageerror">3.1. The portal element</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="portalactivateevent">
   <b><a href="#portalactivateevent">#portalactivateevent</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-portalactivateevent">2. Concepts</a>
    <li><a href="#ref-for-portalactivateevent①">3.3. The PortalActivateEvent interface</a> <a href="#ref-for-portalactivateevent②">(2)</a>
    <li><a href="#ref-for-portalactivateevent③">3.4. Miscellaneous extensions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-portalactivateevent-data">
   <b><a href="#dom-portalactivateevent-data">#dom-portalactivateevent-data</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-portalactivateevent-data">2. Concepts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-portalactivateeventinit">
   <b><a href="#dictdef-portalactivateeventinit">#dictdef-portalactivateeventinit</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-portalactivateeventinit">3.3. The PortalActivateEvent interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="portalactivateevent-predecessor-browsing-context">
   <b><a href="#portalactivateevent-predecessor-browsing-context">#portalactivateevent-predecessor-browsing-context</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-portalactivateevent-predecessor-browsing-context">2. Concepts</a>
    <li><a href="#ref-for-portalactivateevent-predecessor-browsing-context①">3.3. The PortalActivateEvent interface</a> <a href="#ref-for-portalactivateevent-predecessor-browsing-context②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="portalactivateevent-successor-window">
   <b><a href="#portalactivateevent-successor-window">#portalactivateevent-successor-window</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-portalactivateevent-successor-window">2. Concepts</a>
    <li><a href="#ref-for-portalactivateevent-successor-window①">3.3. The PortalActivateEvent interface</a> <a href="#ref-for-portalactivateevent-successor-window②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="portalactivateevent-activation-promise">
   <b><a href="#portalactivateevent-activation-promise">#portalactivateevent-activation-promise</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-portalactivateevent-activation-promise">2. Concepts</a> <a href="#ref-for-portalactivateevent-activation-promise①">(2)</a>
    <li><a href="#ref-for-portalactivateevent-activation-promise②">3.3. The PortalActivateEvent interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="portalactivateevent-adopted-predecessor-element">
   <b><a href="#portalactivateevent-adopted-predecessor-element">#portalactivateevent-adopted-predecessor-element</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-portalactivateevent-adopted-predecessor-element">2. Concepts</a>
    <li><a href="#ref-for-portalactivateevent-adopted-predecessor-element①">3.3. The PortalActivateEvent interface</a> <a href="#ref-for-portalactivateevent-adopted-predecessor-element②">(2)</a> <a href="#ref-for-portalactivateevent-adopted-predecessor-element③">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-portalactivateevent-adoptpredecessor">
   <b><a href="#dom-portalactivateevent-adoptpredecessor">#dom-portalactivateevent-adoptpredecessor</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-portalactivateevent-adoptpredecessor">2. Concepts</a> <a href="#ref-for-dom-portalactivateevent-adoptpredecessor①">(2)</a>
    <li><a href="#ref-for-dom-portalactivateevent-adoptpredecessor②">3.3. The PortalActivateEvent interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedefdef-messageeventsource">
   <b><a href="#typedefdef-messageeventsource">#typedefdef-messageeventsource</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedefdef-messageeventsource">3.4. Miscellaneous extensions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-windoweventhandlers-onportalactivate">
   <b><a href="#dom-windoweventhandlers-onportalactivate">#dom-windoweventhandlers-onportalactivate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-windoweventhandlers-onportalactivate">3.4. Miscellaneous extensions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-window-portalhost">
   <b><a href="#dom-window-portalhost">#dom-window-portalhost</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-window-portalhost">3.2. The PortalHost interface</a>
    <li><a href="#ref-for-dom-window-portalhost①">3.4. Miscellaneous extensions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="eventdef-window-portalactivate">
   <b><a href="#eventdef-window-portalactivate">#eventdef-window-portalactivate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-eventdef-window-portalactivate">2. Concepts</a> <a href="#ref-for-eventdef-window-portalactivate①">(2)</a>
    <li><a href="#ref-for-eventdef-window-portalactivate②">3.1. The portal element</a>
    <li><a href="#ref-for-eventdef-window-portalactivate③">3.3. The PortalActivateEvent interface</a>
   </ul>
  </aside>
<script>/* script-var-click-highlighting */

    document.addEventListener("click", e=>{
        if(e.target.nodeName == "VAR") {
            highlightSameAlgoVars(e.target);
        }
    });
    {
        const indexCounts = new Map();
        const indexNames = new Map();
        function highlightSameAlgoVars(v) {
            // Find the algorithm container.
            let algoContainer = null;
            let searchEl = v;
            while(algoContainer == null && searchEl != document.body) {
                searchEl = searchEl.parentNode;
                if(searchEl.hasAttribute("data-algorithm")) {
                    algoContainer = searchEl;
                }
            }

            // Not highlighting document-global vars,
            // too likely to be unrelated.
            if(algoContainer == null) return;

            const algoName = algoContainer.getAttribute("data-algorithm");
            const varName = getVarName(v);
            const addClass = !v.classList.contains("selected");
            let highlightClass = null;
            if(addClass) {
                const index = chooseHighlightIndex(algoName, varName);
                indexCounts.get(algoName)[index] += 1;
                indexNames.set(algoName+"///"+varName, index);
                highlightClass = nameFromIndex(index);
            } else {
                const index = previousHighlightIndex(algoName, varName);
                indexCounts.get(algoName)[index] -= 1;
                highlightClass = nameFromIndex(index);
            }

            // Find all same-name vars, and toggle their class appropriately.
            for(const el of algoContainer.querySelectorAll("var")) {
                if(getVarName(el) == varName) {
                    el.classList.toggle("selected", addClass);
                    el.classList.toggle(highlightClass, addClass);
                }
            }
        }
        function getVarName(el) {
            return el.textContent.replace(/(\s| )+/, " ").trim();
        }
        function chooseHighlightIndex(algoName, varName) {
            let indexes = null;
            if(indexCounts.has(algoName)) {
                indexes = indexCounts.get(algoName);
            } else {
                // 7 classes right now
                indexes = [0,0,0,0,0,0,0];
                indexCounts.set(algoName, indexes);
            }

            // If the element was recently unclicked,
            // *and* that color is still unclaimed,
            // give it back the same color.
            const lastIndex = previousHighlightIndex(algoName, varName);
            if(indexes[lastIndex] === 0) return lastIndex;

            // Find the earliest index with the lowest count.
            const minCount = Math.min.apply(null, indexes);
            let index = null;
            for(var i = 0; i < indexes.length; i++) {
                if(indexes[i] == minCount) {
                    return i;
                }
            }
        }
        function previousHighlightIndex(algoName, varName) {
            return indexNames.get(algoName+"///"+varName);
        }
        function nameFromIndex(index) {
            return "selected" + index;
        }
    }
    </script>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>